Do you like sketching? Did you know that you can sketch on Java Script canvas too?
To see the live output of the animation click here.
What do you need to do?
To create the JavaScript sketch board you need to have the pencil cursor in .png/ SVG format (for practising you can use mine below) and follow the steps below:
- Add HTML
- Add CSS
- Add JavaScript/ jQuery
Step1.
Add HTML
Create the canvas-wrap, add canvas and buttons.
<div id="canvas-wrap">
<div class="sketch-board">
<div class="paper"></div>
</div>
<div class="paperclip"></div>
<canvas id="canvas"></canvas>
<button class="button" id="clear">Clear</button>
<button class="button" id="undo">Undo</button>
<button class="button" id="brushBlack">Black</button>
<button class="button" id="brushYellow">Yellow</button>
<button class="button" id="brushRed">Red</button>
<button class="button" id="brushBlue">Blue</button>
<button class="button" id="brushGreen">Green</button>
</div>Step2.
Add CSS
Set the background colour and the size:
body {
background-color: #EFD5C3;
height: 100vh;
}Add canvas-wrap:
#canvas-wrap {
position: relative;
left: 35%;
}And the canvas with mouse cursor:
canvas {
background-color: #fff;
cursor: url(https://lenadesignorg.files.wordpress.com/2020/06/pencil.png?w=79) 5 80, auto;
z-index:100;
}Style the sketchboard:
.sketch-board {
position: absolute;
width: 700px;
height: 500px;
background-color: #c19875;
z-index:-5;
border-radius: 30px;
left: -80px;
box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.sketch-board:before {
background-color: #EFD5C3;
position: absolute;
width: 50px;
height: 170px;
border-radius: 30px;
content:"";
left: 30px;
top: 170px;
box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.paper {
background-color: #e6e3dc;
width: 500px;
height: 350px;
position: absolute;
top: 90px;
left: 120px;
}
.paperclip {
position: absolute;
width: 150px;
height: 40px;
border: 7px solid #c0c0c0;
border-radius: 20px;
left: 200px;
top: 25px;
box-shadow: 5px -5px 0 rgba(0,0,0,0.07);
z-index:1;
}
.paperclip:after {
position: absolute;
content:"";
width: 200px;
height: 30px;
top: -20px;
left:-25px;
background-color: #8b786d;
box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
border-radius: 20px;
}Style buttons:
.button {
background-color: #00a6a6;
border: none;
border-radius:20px;
color: #fff;
padding: 7px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
top: 450px;
left:45px;
position: relative;
transition-duration: 0.4s;
}
.button:hover {
background-color: #73bfb8;
}
Step3.
Add JavaScript/ jQuery
Note: Remember to add jQuery (code above) in the <head> section in your code.
var canvas = document.querySelector('canvas');
canvas.style.position = 'absolute';
canvas.style.top = "80px";
canvas.style.left = "50px";
var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 350;
var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isMouseDown = false;
var brushSize = 3;
var brushColor = "#000";
ctx.lineJoin = ctx.lineCap = 'round';
var points = [];
function handleMouseDown(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
ctx.beginPath();
if (ctx.lineWidth != brushSize) {
ctx.lineWidth = brushSize;
}
if (ctx.strokeStyle != brushColor) {
ctx.strokeStyle = brushColor;
}
ctx.moveTo(mouseX, mouseY);
points.push({
x: mouseX,
y: mouseY,
size: brushSize,
color: brushColor,
mode: "begin"
});
lastX = mouseX;
lastY = mouseY;
isMouseDown = true;
}
function handleMouseUp(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
isMouseDown = false;
points.push({
x: mouseX,
y: mouseY,
size: brushSize,
color: brushColor,
mode: "end"
});
}
function handleMouseMove(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
if (isMouseDown) {
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
lastX = mouseX;
lastY = mouseY;
points.push({
x: mouseX,
y: mouseY,
size: brushSize,
color: brushColor,
mode: "draw"
});
}
}
$("#canvas").mousedown(function (e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
handleMouseUp(e);
});
function redrawAll() {
if (points.length == 0) {
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < points.length; i++) {
var pt = points[i];
var begin = false;
if (ctx.lineWidth != pt.size) {
ctx.lineWidth = pt.size;
begin = true;
}
if (ctx.strokeStyle != pt.color) {
ctx.strokeStyle = pt.color;
begin = true;
}
if (pt.mode == "begin" || begin) {
ctx.beginPath();
ctx.moveTo(pt.x, pt.y);
}
ctx.lineTo(pt.x, pt.y);
if (pt.mode == "end" || (i == points.length - 1)) {
ctx.stroke();
}
}
ctx.stroke();
}
function undoLast() {
points.pop();
redrawAll();
}
$("#brushGreen").click(function () {
brushColor = "#89bd9e";
});
$("#brushYellow").click(function () {
brushColor = "#fde74c";
});
$("#brushRed").click(function () {
brushColor = "#e55934";
});
$("#brushBlue").click(function () {
brushColor = "#5bc0eb";
});
$("#brushBlack").click(function () {
brushColor = "#000";
});
var interval;
$("#undo").mousedown(function () {
interval = setInterval(undoLast, 20);
}).mouseup(function () {
clearInterval(interval);
});
var clear = function(){
ctx.clearRect(0,0,500,350);
};
$('#clear').on("click",clear);To see the live output of the animation go to my Codepen.
Enjoy coding!
