This week, we will build a simple drawing grid using HTML5 and javascript. In the coming weeks we will transform this simple example into a fully functional drawing application. For this demo, the entire browser window will be a canvas and resizing or reloading the window will clear it.
The first step is to define our canvas and add some css that will set the size of the canvas to the size of the browser window.
<!DOCTYPE HTML>
<html>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0px; }
</style>
<body>
<canvas id="grid">
<p>Your browser does not support HTML5 canvas</p>
</canvas>
</body>
</html>
This is all that is required to create a canvas that consumes the entire browser window. The next step is to add javascript to the page so we can have an interactive drawing surface. We will be using jquery and loading a script named grid.js; which will perform the canvas updates.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0px; }
</style>
<body>
<canvas id="grid">
<p>Your browser does not support HTML5 canvas</p>
</canvas>
<script type="text/javascript" src="scripts/grid.js"></script>
</body>
</html>
The next step is to create a folder named “scripts” and within it create a text file called grid.js using your favorite editor. The grid.js script will be responsible for all of the canvas updating. For starters, we will need to define the callbacks for window events in order to initialize the canvas data. “window.onresize” will be used so that the canvas can be cleared when the window is resized.
window.onload = window.onresize = function() {
var grid_canvas = document.getElementById("grid");
var ctx = grid_canvas.getContext("2d");
var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;
var backgroundColor = "rgb(0,0,255)";
grid_canvas.style.position = "fixed";
grid_canvas.setAttribute("width", viewWidth);
grid_canvas.setAttribute("height", viewHeight);
grid_canvas.style.top = 0;
grid_canvas.style.left = 0;
ctx.clearRect(0,0,viewWidth,viewHeight);
ctx.fillStyle = backgroundColor;
ctx.fillRect(0,0,viewWidth,viewHeight);
}
At this point, the canvas is created, but isn’t very interesting. To draw on the canvas, we will rely on mouse events. In this demo, holding down the left mouse button and dragging will fill in cells of the grid that the mouse is hovering over. Holding any other mouse button down and dragging will be used for an “erase” function. It’s not actually erasing, but coloring the cells in with the defined background color. The following should be added to the window event callback defined above.
var xOffset = $("#grid").offset().left;
var yOffset = $("#grid").offset().top;
var mouseDown = false;
var mouseButton = 0;
var penColor = "rgb(255,255,255)";
var penWeight = 5;
$("#grid").mousedown(function(e) {
mouseDown = true;
mouseButton = e.which;
}).bind('mouseup', function() {
mouseDown = false;
});
$("#grid").mousemove(function(e) {
if (mouseDown) {
var x = Math.floor((e.pageX-xOffset) / penWeight);
var y = Math.floor((e.pageY-yOffset) / penWeight);
ctx.fillStyle = mouseButton == 1 ? penColor : backgroundColor;
ctx.fillRect(x*penWeight, y*penWeight, penWeight, penWeight);
}
});
Loading the page now should result in a functional drawing application. Changing the “penWeight” variable will alter the cell sizes on the hidden grid. As a small optimization, you may consider storing the last cell that was drawn to and skipping a redraw (included in the source example) if the user is still moving with the cell. At smaller cell sizes, this becomes less important.
The demo for the grid can be found here.
Code Blog 