I’ve previously written about how you can write games using tools like React. I’ve also written about creating a basic game in Html and Javascript, and things like rotating shapes.
In this post, I’m going to demonstrate a sort of Etch A Sketch type program.
The HTML is very simple here:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> <script src="test.js"></script> </head> <body onload="doDrawing()"> <canvas id="canvas"> </canvas> </body> </html>
Basically just bringing in a Javascript file, CSS and putting a canvas on the screen. I’m also calling a function onload – it’s worth bearing in mind that, as it goes, this won’t resize should you change the size of the browser. If you want that behaviour, then have a look at one of my previous posts mentioned above.
The CSS is even simpler:
* {
margin:0;
padding:0;
}
canvas {
display: block;
}
All we’re doing here is removing the default margin, and stopping scroll bars from appearing.
Javascript
The Javascript is where everything is happening; let’s start with some variables:
let x = 10; let y = 10; let directionHorizontal = 1; let directionVertical = 0;
The four variables determine the position that we want to draw in, and which way we’re heading. We can now render this to the screen like this:
const doDrawing = () => {
var c = document.getElementById("canvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
var ctx = c.getContext("2d");
setInterval(() => {
ctx.fillRect(x, y, 1, 1);
x += directionHorizontal;
y += directionVertical;
}, 10);
}
The canvas width and height are the first things to note: when I started playing with this, I made the mistake of trying to set this in CSS; if you do, it actually doesn’t change the size of the canvas, but stretches it across the screen; this was the only way that I could get the canvas to display full screen without that stretching effect (if you know another / better way, please say so in the comments!)
Next we get the context from the canvas – this allows us to render to it, and then we simply set-up an interval, and draw a rectangle 1px x 1px each iteration.
Summary
That it – as with previous posts, there’s not a whole lot to using the HTML canvas, but I do like to re-experiment every so often.