Drawing Techniques Using Canvas in HTML 5 | Techbirds
Posted on: April 28, 2014 /
Categories: HTML5/Design / Author Name: Ankit Awasthi
What is Canvas in HTML 5
The HTML5 canvas element is used to draw graphics. 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.
Let’s Start implement Drawing Techniques
Add canvas tag in Body section in Html Document
Add CSS Code for outline of Canvas.
canvas { border: 1px solid #ccc }
|
canvas { border: 1px solid #ccc } |
Add Script code
var el = document.getElementById(‘c’); var ctx = el.getContext(‘2d’); var isDrawing; el.onmousedown = function(e) { isDrawing = true; ctx.moveTo(e.clientX, e.clientY); }; el.onmousemove = function(e) { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; el.onmouseup = function() { isDrawing = false; };
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var el = document.getElementById(‘c’); var ctx = el.getContext(‘2d’); var isDrawing; el.onmousedown = function(e) { isDrawing = true; ctx.moveTo(e.clientX, e.clientY); }; el.onmousemove = function(e) { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; el.onmouseup = function() { isDrawing = false; }; |
Thanks
366 total views, 1 views today
Share this On
