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

Delete draw on canvas

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

91
Chapter 14/draw on canvas
View File

@ -1,91 +0,0 @@
<!doctype html>
<html>
<head>
<title>Canvas HTML5</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<div>
<button class="save">Save</button>
<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 class="output"></div>
<script>
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const penColor = document.querySelector('#penColor');
const penWidth = document.querySelector('#penWidth');
const btnSave = document.querySelector('.save');
const btnClear = document.querySelector('.clear');
const output = document.querySelector('.output');
const mLoc = {
draw: false, x: 0, y: 0, lastX: 0, lastY: 0
};
canvas.style.border = '1px solid black';
btnSave.addEventListener('click', saveImg);
btnClear.addEventListener('click', clearCanvas);
canvas.addEventListener('mousemove', (e) => {
mLoc.lastX = mLoc.x;
mLoc.lastY = mLoc.y;
//console.log(e);
mLoc.x = e.clientX;
mLoc.y = e.clientY;
draw();
})
canvas.addEventListener('mousedown', (e) => {
mLoc.draw = true;
})
canvas.addEventListener('mouseup', (e) => {
mLoc.draw = false;
})
canvas.addEventListener('mouseout', (e) => {
mLoc.draw = false;
})
function saveImg() {
const dataURL = canvas.toDataURL();
console.log(dataURL);
const img = document.createElement('img');
output.prepend(img);
img.setAttribute('src', dataURL);
const link = document.createElement('a');
output.append(link);
let fileName = Math.random().toString(16).substr(-8) + '.png'
link.setAttribute('download', fileName);
link.href = dataURL;
link.click();
output.removeChild(link);
}
function clearCanvas() {
let temp = confirm('clear canvas?');
if (temp) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
function draw() {
if (mLoc.draw) {
ctx.beginPath();
ctx.moveTo(mLoc.lastX, mLoc.lastY);
ctx.lineTo(mLoc.x, mLoc.y);
ctx.strokeStyle = penColor.value;
ctx.lineWidth = penWidth.value;
ctx.stroke();
ctx.closePath();
}
}
</script>
</body>
</html>