html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing App </title>
<link href="styles.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<canvas id="canvas" value="#000000"></canvas>
<div class="tools">
<button id="clr">clear canvas</button>
<button id="erase">Eraser</button>
<button id="pen">Pen</button>
<button id="toolsOpen">Tools</button>
<button id="downloadBtn">Download</button>
<div id="tools">
<label>Change pen size</label>: <input type="range" id="rangeSlider" value="4">
<br>
<label><strong>Select a color</strong></label>: <input type="color" id="col" value="#ff0000">
<br>
<label><strong>select a background color</strong></label> : <input type="color" id="bg">
<br>
<label>Change opacity</label>: <input type="range" id="opacityRange" min="0" max="1" step="0.01" value="1">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
margin:0;
padding:0;
}
body {
overflow:hidden;
}
canvas{
border:2px solid black;
background: black;
touch-action:none;
position:fixed;
top:0;
}
strong{
font-size:12px;
font-weight:400;
}
.tools{
position:fixed;
bottom:20px;
}
#tools{
width:100vw;
align-items:center;
display:flex;
justify-content:center;
padding-top:10px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var painting = false;
window.addEventListener('load', function(){
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
//Event listeners
//touch events
canvas.addEventListener('touchstart', function(e){
painting = true;
draw(e);
})
canvas.addEventListener('touchend', function(){
painting = false;
ctx.beginPath();
})
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run