Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing onto canvas% element

I have a problem while trying to draw onto a canvas GUI element.

I create a frame, a canvas and try to draw on the dc context of the canvas with the draw-line method, but nothing happens. The frame with the canvas is shown, but the line isn't shown on the canvas.

(require racket/gui/base)

(define frame (new frame% [label "Frame"] [width 500] [height 500]))
(define canvas (new canvas% [parent frame]))
(define dc (send canvas get-dc))

(send dc draw-line 10 10 200 200)
(send frame show #t)

Does anybody know where I am wrong in the code above ?

like image 294
user2295291 Avatar asked Apr 18 '13 13:04

user2295291


People also ask

How do you draw graphics on the fly via scripting?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Can we draw shapes in HTML5?

You can draw shapes like circle, rectangle, line, etc using SVG in HTML5 easily. Let's see an example to draw a rectangle using SVG.

How do I draw on an image in HTML?

First, a canvas already presents on the HTML page is retrieved. Then, a 2D rendering context is initialized. This will be used to draw on the surface of the blank canvas or on the optional image passed as a parameter. In this last case, the canvas element is resized to fit the image dimensions.

How does the developer draw on the canvas?

In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.


1 Answers

The problem is that even though you can draw on the canvas outside a call to on-paint method of the canvas, the effect is temporary. Any window activity that require the window to refresh (such as moving, and resizing) can potentially erase your drawing.

Therefore: Draw everything from within the paint-callback.

#lang racket
(require racket/gui/base)

(define frame (new frame% [label "Frame"] [width 500] [height 500]))
(define canvas (new canvas% 
                    [parent frame]
                    [paint-callback 
                     (λ(can dc) (send dc draw-line 10 10 200 200))]))
(define dc (send canvas get-dc))
(send frame show #t)

See Documentation on the canvas class for further information.

like image 56
soegaard Avatar answered Nov 03 '22 15:11

soegaard