For the past three months, I’ve been working on creating in-browser games for Beamly, in my role as tech lead of the Games team.
The Canvas API lets you easily draw to the
<canvas> element. Here’s an example of drawing a rectangle:
var canvas = document.getElementById('canvasEl'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(5, 5, 200, 100); ctx.fillStyle = '#32E0B4'; ctx.fill(); ctx.lineWidth = 6; ctx.strokeStyle = '#00D9A3'; ctx.stroke();
And here’s the outcome:
In the above example we drew a rectangle that was 200px by 100px and started at a point 5px from the left, and 5 px from the top. Now what about a triangle? Sure, here’s what you could write:
var canvas = document.getElementById('canvasEl'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(5, 5); ctx.lineTo(50, 50); ctx.lineTo(5, 85); ctx.closePath(); ctx.fillStyle = '#32E0B4'; ctx.fill(); ctx.lineWidth = 6; ctx.strokeStyle = '#00D9A3'; ctx.stroke();
Let me know how you get on with using drawpath. There’s plenty of features I want to add, not least of which the ability to edit the code and see changes in realtime, but for the time being it works as a simple path editor for Canvas.