JavaScript Coding Tutorial — Part 6 — Custom Canvas Paint Brushes

In Part 5 we made a square follow our mouse cursor and display the canvas coordinates in a text display, now let’s do something fun and turn it into a canvas drawing JavaScript app with custom paint brushes and effects.

By implementing only a handful of changes to just two of the functions, we can create a fairly worthy paint brush effect.

By changing just two functions we can get some pretty nice paint brush effects already.

Update your drawMouseCoordinates() and draw() functions to match the following code snippet. Notice we are commenting out almost everything in our draw() function that loops to draw on every animation frame, which is usually about ~60 fps (frames per seconds).

function drawMouseCoordinates(x, y) {
    //ctx.fillStyle = "#000000";
    //ctx.font = '1em sans-serif';
    //ctx.textAlign = 'right';
    //ctx.fillText(x + ',' + y, 597, 17);
    ctx.setLineDash([5, 5]);
    ctx.shadowColor = '#9ecc35';
    ctx.shadowBlur = 15;
    ctx.fillStyle = "#54b958";
    ctx.fillRect(x, y, -50, -50);
    ctx.lineWidth = 5;
    ctx.strokeStyle = "#4ebca9";
    ctx.stroke();
}
function draw() {
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    //ctx.fillStyle = "#ffffff";
    //ctx.fillRect(0, 0, canvas.width, canvas.height);
    //drawRect();
    //drawTriangle();
    //drawText();
    drawMouseCoordinates(mouseX, mouseY)
    window.requestAnimationFrame(draw);
}

Ok, at this point when you save your JavaScript.html and refresh your web browser, you should see glowing green-ish squares showing up where you put your mouse cursor in the canvas. Take a minute (or two) to enjoy your hard work and maybe try writing your name, or change some of the colors or numbers.

Take a minute to enjoy and maybe try writing your name or something.

Alright, so that’s all swell and everything, but what’s really fun is when we experiment with adding some randomness to our square brush.

So, let’s try adding a random number to the fillRect() like this…

ctx.fillRect(x, y+getRandomNum(1,200), -50, -50);

…or this…

ctx.fillRect(x+getRandomNum(1,200), y+getRandomNum(1,200), -50, -50);

…and now with a single pass of our mouse cursor across our canvas we get a lot more than just a straight line.

A single pass across our canvas with a custom animated paint brush.

Try making a few tweaks to some of the numbers and colors and see what masterpiece you can create with a single pass of your mouse cursor! Behold the power of JavaScript!

Behold the power of JavaScript with what you can create with a single pass of your mouse cursor.

Also, remember you can use the rgba() color format that give you an option to put a 0.5 at the end to make each square 50% semi-transparent.

function drawMouseCoordinates(x, y) {
    //ctx.fillStyle = "#000000";
    //ctx.font = '1em sans-serif';
    //ctx.textAlign = 'right';
    //ctx.fillText(x + ',' + y, 597, 17);
    ctx.setLineDash([5, 5]);
    ctx.shadowColor = "#59584b";
    ctx.shadowBlur = 15;
    ctx.fillStyle = "rgba(195,89,236, 0.5)";
    ctx.fillRect(x+getRandomNum(1,50), y+getRandomNum(1,300), -50, -50);
    ctx.lineWidth = 5;
    ctx.strokeStyle = "#bca4e9";
    ctx.stroke();
}

Using rgba color formats can create some interesting effects with the semi-transparency.

To the observant, you might have noticed that it looks like we have a stroke or border in the code for our rectangle, but it doesn’t appear to be working and if you compared it with the drawRect() function from previously, you’ll notice it’s missing strokeRect(). So, we can add that in like the following.

function drawMouseCoordinates(x, y) {
    //ctx.fillStyle = "#000000";
    //ctx.font = '1em sans-serif';
    //ctx.textAlign = 'right';
    //ctx.fillText(x + ',' + y, 597, 17);
    ctx.shadowColor = "#f6c63c";
    ctx.shadowBlur = 15;
    ctx.fillStyle = "rgba(238,96,61, 0.5)";
    ctx.fillRect(x+getRandomNum(1,50), y+getRandomNum(1,300), -50, -50);
    ctx.strokeStyle = "#f6e03c";
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 5;
    ctx.strokeRect(x+getRandomNum(1,5), y+getRandomNum(1,300), -50, -50);
}

Fixing our rectangle/square dashed stroke/border by adding strokeRect.

Hopefully, this give you a better sense of what you can do even with one of the simplest polygons, a dashed border, some colors, a little semi-transparency and some randomness. If you want you could add back in your text or name by un-commenting the drawText(); in your main draw() function. So, let your art be named!

Let your art be named and add back in your drawText function in your main draw function.

And… that’s the end of the JavaScript Coding Tutorial — Part 6