Drawing picture in a web canvas


I am moving a desktop app to a web app. I need to draw a picture with a 2d object inside on a web canvas. I tried

if pp<>nil then
  g.DrawPicture (pp, 30, 30)

And I get " This application has encountered a non-fatal problem"
If I draw a rectangle, It works fine…

g.DrawingColor = Color.Red
g.PenSize = 5
g.DrawRectangle(10, 10, 100, 100)

Any idea?



Can you provide more information on what the contents of pp are?

Also, bear in mind that the WebPicture must exist on the server side, or be rendered on the server side (in the case of SVGdata).

This line works:

g.DrawPicture(Image1, 0, 0, g.Width, g.Height)

g as WebGraphics
Image1 is a png file that has been added to the Xojo project

There is a CanvasBoxes Xojo Example Project that would be a good resource as well. That is where I inserted to above line of code for testing (commenting out the lines that draw the boxes).

Here is part the code but even this don’t work

d=New Group2D

//create a picture object for displaying the images 

pp  = new picture(700*defE,700*defE,0)

if pp=nil then
  messagebox( "pb!")
  //rectangle bords arrondis ext.
  rectext ctrx,ctry,xht,yht

pp.objects.append d

rectext is a function :

f=New figureshape
dim a As Integer

f.addLine x,y+h/2,x-w/2+a,y+h/2
f.addQuad x-w/2+a,y+h/2, x-w/2,y+h/2-a,x-w/2,y+h/2//bas gauche
f.addline x-w/2,y+h/2-a,x-w/2,y-h/2+a
f.addQuad x-w/2,y-h/2+a, x-w/2+a,y-h/2,x-w/2,y-h/2//Haut gauche
f.addline x-w/2+a,y-h/2,x+w/2-a,y-h/2
f.addQuad x+w/2-a,y-h/2,x+w/2,y-h/2+a,x+w/2,y-h/2// Haut droit
f.addline x+w/2,y-h/2+a,x+w/2,y+h/2-a
f.addQuad x+w/2,y+h/2-a,x+w/2-a,y+h/2,x+w/2,y+h/2// Bas droit
f.addLine x+w/2-a,y+h/2,x,y+h/2
d.append f

Since I am drawing the picture with the app, I would guess it’s on the server ?

If you can provide a sample project of your Desktop code that works and one for Web that doesn’t, someone will help you better.

Having part of the code makes things hard to guess.

You can use Dropbox, one drive or other system to share the projects and post the link here.

Here is the dropbox link : https://www.dropbox.com/scl/fo/9j4f2sn9ppm2wqr8nrmqv/h?rlkey=o9dm6ir3xnzqr2conn6f4d4h2&dl=0

You enter a dimension like in the attached image

Then click to drawing and you will get this image below

But as you will see it’s made with 2D objets, maybe this is the problem since it looks like web canvas can’t use 2D objets ?

Thanks for your help


Hi Christophe,

I downloaded the Web Project from dropbox.

What you are trying to do is definitely possible.

One problem seems to be related to the creation of the Picture:

pp = new picture(700defE,700defE,0)

When the third parameter (depth) is set to zero, it seemed to cause problems when trying to work with the Graphics.

I have a simple Xojo project (2024r3) that draws an Object2D, specifically a RectShape into a Picture Object and then does the following:

  1. sets a WebImageViewer to the Picture
  2. does a DrawPicture on a WebCanvas Paint Event that renders the Picture to the WebCanvas

I can email that project to you if your are interested. The sample project has all the elements on one WebPage, but once you see it in action, you can adapt it to your project as needed.

Hi Arthur,

It’s very nice of you, I’ll be happy to see your solution if you can send it to me.