Congratulations! Amazing script!

[inglesuniversal]

I will be teaching some children how to write their first words and this script is exactly what I was looking for.

Thank you so much!

Quick question: How to change the pen or ink color from black (current color) to white?

Thanks

[ChenYuHo]

You can set stroke style before stroke(), i.e.,

handwriting.js/handwriting.canvas.js

Line 93 in 6d41109

this.cxt.stroke();

and

handwriting.js/handwriting.canvas.js

Line 140 in 6d41109

this.cxt.stroke();

e.g.,

this.cxt.strokeStyle = '#ff0000'; // make the following stroke red
this.cxt.stroke(); 

You may also add a color selector and set this.cxt.strokeStyle so that one can control the color of every stroke.

[inglesuniversal]

Great... It worked like a charm. Now, how can I make the canvas responsive to:

width: calc(100vh - 20px);
height: 400px

It works visually but pen location and erase button works awkwardly.

var canvas = new handwriting.Canvas(document.getElementById('canvas'), 5); var width = document.getElementById("demo").clientWidth canvas.cxt.canvas.width = width < 400 ? width : 400; canvas.cxt.canvas.height = width < 400 ? width : 400;

[lojik-ng]

Great... It worked like a charm. Now, how can I make the canvas responsive to:

width: calc(100vh - 20px); height: 400px

It works visually but pen location and erase button works awkwardly.

var canvas = new handwriting.Canvas(document.getElementById('canvas'), 5); var width = document.getElementById("demo").clientWidth canvas.cxt.canvas.width = width < 400 ? width : 400; canvas.cxt.canvas.height = width < 400 ? width : 400;

You can use javascript to set the width and height before calling handwriting.Canvas:

    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) - 20;
    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
    document.getElementById("can").width = vw;
    document.getElementById("can").height = vh;
    var can1 = new handwriting.Canvas(document.getElementById("can"));

[inglesuniversal]

@ChenYuHo you did it again!

LOVE IT

I works beautifully