HTML5 Canvas White board example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Canvas Whiteboard</title>
	</head>
<body>
	 <style>
        * {
            margin: 0;
            padding: 0;
        }

body, html {
            height: 100%;
        }

#myCanvas {
            cursor: crosshair;
            position: fixed;
        }
    </style>
</head>
<body>
    <h2 style="color:red"><i>Canvas whiteboard</i></h2>
    <canvas id="myCanvas"></canvas>

myCanvas.width = window.innerWidth;
            myCanvas.height = window.innerHeight;

ctx.fillStyle = "white";
            ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);

if (myCanvas) {
                var isDown = false;
                var canvasX, canvasY;
                ctx.lineWidth = 1;

$(myCanvas)
                .mousedown(function (e) {
                    isDown = true;
                    ctx.beginPath();
                    canvasX = e.pageX - myCanvas.offsetLeft;
                    canvasY = e.pageY - myCanvas.offsetTop;
                    ctx.moveTo(canvasX, canvasY);
                })
                .mousemove(function (e) {
                    if (isDown !== false) {
                        canvasX = e.pageX - myCanvas.offsetLeft;
                        canvasY = e.pageY - myCanvas.offsetTop;
                        ctx.lineTo(canvasX, canvasY);
                        ctx.strokeStyle = "blue";
                        ctx.stroke();
                    }
                })
                .mouseup(function (e) {
                    isDown = false;
                    ctx.closePath();
                });
            }

draw = {
                started: false,
                start: function (evt) {

ctx.beginPath();
                    ctx.moveTo(
                        evt.touches[0].pageX,
                        evt.touches[0].pageY
                    );

this.started = true;

},
                move: function (evt) {

if (this.started) {
                        ctx.lineTo(
                            evt.touches[0].pageX,
                            evt.touches[0].pageY
                        );

ctx.strokeStyle = "#000";
                        ctx.lineWidth = 5;
                        ctx.stroke();
                    }

},
                end: function (evt) {
                    this.started = false;
                }
            };

myCanvas.addEventListener('touchstart', draw.start, false);
            myCanvas.addEventListener('touchend', draw.end, false);
            myCanvas.addEventListener('touchmove', draw.move, false);

document.body.addEventListener('touchmove', function (evt) {
                evt.preventDefault();
            }, false);
        };
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

Canvas White Board

Write code here

Output