Javascript – Canvas

Canvas is a transparent HTML element that is used for drawing and animation. To draw or animate on the canvas we first need to create the HTML element. Then in Javascript, we need to get the canvas reference, create a context object and then we can draw on it.

, <span>Javascript – Canvas</span>, KandZ
, <span>Javascript – Canvas</span>, KandZ

, <span>Javascript – Canvas</span>, KandZ
write text
, <span>Javascript – Canvas</span>, KandZ
draw a rectangle without fill

with save() function you save/push the context setting to the stack and with the restore() function you get/pop the last setting from the stack.

, <span>Javascript – Canvas</span>, KandZ
, <span>Javascript – Canvas</span>, KandZ

Animating

If you want to animate object on the canvas there is an animation loop:

  1. Clear the canvas
, <span>Javascript – Canvas</span>, KandZ

2. Draw the object

, <span>Javascript – Canvas</span>, KandZ

3. Move the object

, <span>Javascript – Canvas</span>, KandZ

All the code

, <span>Javascript – Canvas</span>, KandZ
, <span>Javascript – Canvas</span>, KandZ
, <span>Javascript – Canvas</span>, KandZ
104300cookie-checkJavascript – CanvasJavascript – Canvas

Related posts

One Thought to “Javascript – Canvas

Comments are closed.