html5 canvas click and draw

HTML5 added new element called CANVAS for drawing graphics using JavaScript. Canvas is a container and we use JavaScript to draw graphics.

In this tutorial I want to show you, how we can draw using mouse on canvas. Let’s start by creating a new html project. I have created a folder called clickdraw and two files named, index.html and main.js

Open index.html and add canvas element and include main.js JavaScript file using script tag as below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CLICK and DRAW</title>
<style>
body {
overflow: hidden;
background-color: black;
}
</style>
</head>
<body>
<canvas>Please update your browser</canvas>
<script src="main.js"></script>
</body>
</html>

if the browser doesn’t support canvas then they will see a message saying Please update your browser.

Now lets start writing JavaScript code. What we going to do here is very simple, when user click on document and starts moving the mouse, will draw circles along that path and when he clicks again will stop drawing.

First we need to get canvas element and let’s do that by tag selector, tag selector returns a collection hence will get the first occurrence or the 0th element.

var canvas = document.getElementsByTagName("canvas")[0];

To draw something on canvas we need to get context, and context here is a 2d context.

var context = canvas.getContext("2d");

By default canvas takes a size of 300x150 px, will change it to take the full browser window size.

var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;

As I discussed above, will start drawing when the user clicks on window and stop when he clicks again, so we need two variables for keeping track of whether mouse was click or released.

var mouseClicked = false, mouseReleased = true;

We need to add event listener to our document, so that our code can detect when the mouse was clicked and moved. So, we need to add two event listeners one for mouse click and one for mouse move.

document.addEventListener("click", onMouseClick, false);
document.addEventListener("mousemove", onMouseMove, false);

In the above code, when user clicks onMouseClick function will be called and when the user moves mouse onMouseMove function will be called. Now lets define these two functions, onMouseClick will set the parameter mouseClicked to true if the mouse was not clicked and set it to false if it was already clicked.

function onMouseClick(e) {
mouseClicked = !mouseClicked;
}

Inside mouseMoveFunction, will get the co-ordinates of the mouse and draw a circle at that position.

function onMouseMove(e) {
if (mouseClicked) {
context.beginPath();
context.arc(e.clientX, e.clientY, 7.5, 0, Math.PI * 2, false);
context.lineWidth = 5;
context.strokeStyle = "#fff";
context.stroke();
}
}

If you reload and window now and click and then start moving the mouse, you will see while circles appearing.

Instead of just white color, lets make it colorful by generating random colors, to generate random colors, we need to write a function that will select any random 6 letters from a predefined string.

function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

Now replace the line

context.strokeStyle = "#fff";

with

context.strokeStyle = getRandomColor();

Final code of main.js

and index.html

Final output

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.