ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete draw options

Browse Source
This commit is contained in:
Karan 2021-12-03 14:50:30 +05:30 committed by GitHub
parent fa3d9a9318
commit d299f4eb80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
Chapter 14/draw options
View File

@ -1,59 +0,0 @@
<!doctype html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="controls">
<button class="clear">Clear</button> <span>Color
<input type="color" value="#ffff00" id="penColor"></span> <span>Width
<input type="range" min="1" max="20" value="10" id="penWidth"></span> </div>
</div>
<canvas id="canvas"></canvas>
<script>
window.onload = init;
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.style.border = "1px solid black";
const penColor = document.querySelector("#penColor");
const penWidth = document.querySelector("#penWidth");
document.querySelector(".clear").addEventListener("click", clearImg);
canvas.width = 700;
canvas.height = 700;
let pos = {
x: 0,
y: 0,
};
function init() {
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousemove", setPosition);
canvas.addEventListener("mouseenter", setPosition);
}
function draw(e) {
if (e.buttons !== 1) return;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
setPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.strokeStyle = penColor.value;
ctx.lineWidth = penWidth.value;
ctx.lineCap = "round";
ctx.stroke();
}
function setPosition(e) {
pos.x = e.pageX;
pos.y = e.pageY;
}
function clearImg() {
const temp = confirm("Clear confirm?");
if (temp) {
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
}
}
</script>
</body>
</html>