WorldDrknss/JavaScript.30
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HTML Canvas Day 8 of 30.

Browse Source
This commit is contained in:
Charles Showalter 2023-02-22 10:59:39 -08:00
parent fb6f66bd84
commit 38c106b43b
1 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
HTML Canvas [8-30]/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.heigh = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 6;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
function draw(e) {
if(!isDrawing) return;
// console.log(e);
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
hue++;
if(hue > 360) hue = 0;
}
canvas.addEventListener('mousedown', (e)=> {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', ()=> isDrawing = false);
canvas.addEventListener('mouseout', ()=> isDrawing = false);
</script>
<style>
html, body {
margin: 0;
}
</style>
</body>
</html>