Drawing App javascript | Drawing App using html css javascript – codewithrandom

Drawing App javascript | Drawing App using Html css javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Drawing App. We use HTML, Css, and javascript for this Drawing App. Hope you enjoy our blog so let’s start with a basic HTML structure for a Drawing App.

HTML code 

 <!DOCTYPE html>  
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Drawing App</title>
<canvas id="canvas" width="800" height="700"></canvas>
<div class="toolbox">
<button id="decrease">-</button>
<span id="size">10</span>
<button id="increase">+</button>
<input type="color" id="color">
<button id="clear">X</button>
<script src="script.js"></script>

There is all HTML code for the Drawing App. Now, you can see output without CSS, then we write javascript for the Drawing App.


Drawing App javascript | Drawing App using html css javascript - codewithrandom

CSS Code

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');  
* {
box-sizing: border-box;
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
canvas {
border: 2px solid steelblue;
.toolbox {
background-color: steelblue;
border: 1px solid slateblue;
display: flex;
width: 804px;
padding: 1rem;
.toolbox > * {
background-color: #fff;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
height: 50px;
width: 50px;
margin: 0.25rem;
padding: 0.25rem;
cursor: pointer;
.toolbox > *:last-child {
margin-left: auto;

Now we have completed our CSS section,  Here is our updated output CSS.


Drawing App javascript | Drawing App using html css javascript - codewithrandom

Now add javascript for functionality.

Javascript code 

 const canvas = document.getElementById('canvas');  
const increaseBtn = document.getElementById('increase');
const decreaseBtn = document.getElementById('decrease');
const sizeEL = document.getElementById('size');
const colorEl = document.getElementById('color');
const clearEl = document.getElementById('clear');
const ctx = canvas.getContext('2d');
let size = 10
let isPressed = false
colorEl.value = 'black'
let color = colorEl.value
let x
let y
canvas.addEventListener('mousedown', (e) => {
isPressed = true
x = e.offsetX
y = e.offsetY
document.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.arc(x, y, size, 0, Math.PI * 2)
ctx.fillStyle = color
function drawLine(x1, y1, x2, y2) {
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.strokeStyle = color
ctx.lineWidth = size * 2
function updateSizeOnScreen() {
sizeEL.innerText = size
increaseBtn.addEventListener('click', () => {
size += 5
if(size > 50) {
size = 50
decreaseBtn.addEventListener('click', () => {
size -= 5
if(size < 5) {
size = 5
colorEl.addEventListener('change', (e) => color = e.target.value)
clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))

Final output

Drawing App javascript | Drawing App using html css javascript - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Drawing App. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create an Drawing App using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment