Rainbow glow doodle

Click her for the fullscreen version

Here's the code of our little doodle canvas (detailed explanation below):

<html>

let canvas = document.getElementById("myCanvas");

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

let counter = 0;

context.strokeStyle = `hsl(${counter % 360},100%,50%)`;

context.shadowColor = `hsl(${counter % 360},100%,50%)`;

context.shadowBlur = 5;

context.lineWidth = '2';

let draw = false;

window.onpointerdown = function(event) {

draw = true;

context.beginPath();

context.moveTo(event.offsetX, event.offsetY);

if (!event.isPrimary || event.button == 2) {

context.clearRect(0, 0, canvas.width, canvas.height);

}

};

window.onpointermove = function(event) {

if (draw) {

context.lineTo(event.offsetX, event.offsetY);

context.stroke();

}

};

window.onpointerup = function(event) {

draw = false;

counter += 18;

context.strokeStyle = `hsl(${counter % 360},100%,50%)`;

context.shadowColor = `hsl(${counter % 360},100%,50%)`;

};

</script>

</body>

</html>

Lines [1-6] set up the HTML5 Canvas
[7] init the color counter
[8-9] assign the current color to the line and the shadow
[10] the strength of the blur effect. The blur is random pixels around the main shape, which create the 'glow' effect.
[11] width of the lines
[12] we're not drawing until the pointer is down

The entire action is in the three pointer functions:

1. Pointer down
[15] start drawing
[16] start the drawing path
[17] move the pen to the pointer (mouse/touch) location
[18-19] if more than one finger is touching the screen or right mouse button clicked, clear the canvas

2. Pointer move
[24-26] if drawing has started, draw a line to the current pointer position
Please note that the entire path gets redrawn along with the blur. The blur is what makes the whole line thicker the more you move.

3. Pointer up
[31] stop drawing
[32] increase the color counter
[33-34] set the stroke and shadow color based on the counter
Most people are familiar with the RGB color model (Red/Green/Blue), but here we're using the HSL (Hue/Saturation/Luminance) model.
Here's how it works:

The hue is a range of 0 to 360, so if we're increasing by 18 each time, after 20 strokes we're back to our original color.
To keep things simple, we always set Saturation to 100% and Luminance to 50%.

Here's the code that generated the rainbow above:

<html>

<body>

let canvas2 = document.getElementById("myCanvas2");

let context2 = canvas2.getContext("2d");

for (let x = 0; x < 360; x++) {

context2.fillStyle = `hsl(${x},100%,50%)`;

context2.fillRect(x * 2, 0, 2, 100);

}

</script>

</body>

</html>

Some ideas you may want to add yourself:

- 'undo' function
- image save
- color selection
- shapes (circle/rectangle)

Check out these programming tutorials:

JavaScript:

Goldmine - idle game (~200 lines)

Tunnel run game (~170 lines)

Tower game (84 lines)

Optical illusion (18 lines)

Spinning squares - visual effect (25 lines)

Oldschool fire effect (20 lines)

Fireworks (60 lines)

Animated fractal (32 lines)

Physics engine for beginners

Physics engine - interactive sandbox

Physics engine - silly contraption

Starfield (21 lines)

Yin Yang with a twist (4 circles and 20 lines)

Tile map editor (70 lines)

Sine scroller (30 lines)

Interactive animated sprites

Image transition effect (16 lines)

Your first program in JavaScript: you need 5 minutes and a notepad

Fractals in Excel

Python in Blender 3d:

Domino effect (10 lines)

Wrecking ball effect (14 lines)

3d fractal in Blender Python