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 Onfacebook-7583410twitter-4676820linkedin-9787791google-8780949