In this video we will learn HTML5 canvas by creating a drawing app, and end of the video, you'll have a basic understanding of the canvas and how to work with it using javascript.
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code.
<div class="drawing">
<canvas id="canvas" width="1080" height="590"></canvas>
</div>
<div class="toolbox">
<div class="quantity-field">
<button id="increase" class="value-button increase-button">+</button>
<span id="size" class="number">5</span>
<button id="decrease" class="value-button decrease-button">-</button>
</div>
<input type="color" id="color" />
<br>
<button id="clear">clear</button>
</div>
Create a style.css file with this CSS code.
body {
background-color: #7e7e7e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
}
.drawing {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#canvas {
border: 1px solid black;
background-color: #fff;
}
.quantity-field {
display: grid;
justify-content: center;
margin-bottom: 20px;
}
.quantity-field .value-button{
border: 1px solid #ddd;
margin: 0px;
width: 40px;
height: 40px;
padding: 0;
background: #eee;
outline: none;
cursor: pointer;
}
.quantity-field .value-button:hover {
background: rgb(230, 230, 230);
}
.quantity-field .value-button:active{
background: rgb(210, 210, 210);
}
.quantity-field .decrease-button {
border-radius: 0px 0 8px 8px;
}
.quantity-field .increase-button {
border-radius: 8px 8px 0px 0
}
.quantity-field .number{
display: inline-block;
text-align: center;
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 11pt;
box-sizing: border-box;
background: white;
font-family: calibri;
}
.quantity-field .number::selection{
background: none;
}
.toolbox {
position: absolute;
top: 0%;
left: 0%;
width: 121px;
text-align: center;
height: 100vh;
display: inline-grid;
align-items: center;
justify-content: center;
align-content: center;
}
#color {
margin: 0 auto;
}
#clear {
background: #76B3FA;
border-radius: 100px;
padding: 4px 34px;
text-decoration: none;
font-size: 18px;
text-transform: capitalize;
border: 1px solid blue;
color: #000000;
cursor: pointer;
}
Create script.js file with this Jaascript Code
const canvas = document.getElementById("canvas");
const increaseBtn = document.getElementById("increase");
const decreaseBtn = document.getElementById("decrease");
const paintBrushes = document.getElementById("size");
const paintColor = document.getElementById("color");
const clearCanvas = document.getElementById("clear");
const ctx = canvas.getContext("2d");
let size = 5;
let isPressed = false;
let color = "black";
let x = undefined;
let y = undefined;
canvas.addEventListener("mousedown", (e) => {
isPressed = true;
x = e.offsetX;
y = e.offsetY;
});
canvas.addEventListener("mouseup", (e) => {
isPressed = false;
x = undefined;
y = undefined;
});
canvas.addEventListener("mousemove", (e) => {
if (isPressed) {
const x2 = e.offsetX;
const y2 = e.offsetY;
drawCircle(x2, y2);
drawLine(x, y, x2, y2);
x = x2;
y = y2;
}
});
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color;
ctx.lineWidth = size * 2;
ctx.stroke();
}
increaseBtn.addEventListener("click", () => {
size += 5;
if (size > 50) {
size = 50;
}
updateSizeOnScreen();
});
decreaseBtn.addEventListener("click", () => {
size -= 5;
if (size < 5) {
size = 5;
}
updateSizeOnScreen();
});
paintColor.addEventListener("change", (e) => {
color = e.target.value;
});
clearCanvas.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
function updateSizeOnScreen() {
paintBrushes.innerText = size;
}
then,
connect the style.css and script.js file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments