How do you use the <canvas></canvas> tags? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How do you use the <canvas></canvas> tags?

19th Apr 2017, 7:55 PM
Cash Hoffman
2 Answers
+ 5
simply place it on your html and get it's reference with javascript and control it from there HTML <canvas id="myCanvas"></canvas> JavaScript // get the <canvas> element from HTML canvas=document.getElementById("myCanvas"); // get 2D context object ctx=canvas.getContext("2d"); from here on you draw on the canvas with the ctx object for example draw a red circle in coordinates (50,50) with radius of 10 ctx.fillStyle="red"; ctx.beginPath(); ctx.arc(50,50,10,0,Math.PI*2); ctx.closePath(); ctx.fill(); here are some guide for some canvas methods http://www.html5canvastutorials.com https://www.w3schools.com/html/html5_canvas.asp https://www.sitepoint.com/html5-canvas-tutorial-introduction/ http://codetheory.in/20-best-canvas-tutorials-and-examples-that-will-make-you-a-canvas-master/ API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
19th Apr 2017, 8:07 PM
Burey
Burey - avatar
+ 1
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. resources: https://www.w3schools.com/html/html5_canvas.asp
19th Apr 2017, 8:04 PM
黃冠融
黃冠融 - avatar