Enter your name on the canvas below, and the code will save the drawing coordinates in an array. However, I am having trouble replaying the drawing using these coordinates. It seems to be drawing too quickly!
What would be your approach to resolve this issue?
Check out a sample of what we are aiming for here.
const coordinates = [];
document.getElementById('coordinatesBtn').addEventListener('click', () => {
console.log(coordinates)
});
document.getElementById('coordinatesDrawBtn').addEventListener('click', () => {
play()
});
let step = 0;
function play() {
steps();
function steps() {
draw(null, coordinates[step].x, coordinates[step].y);
step++;
window.requestAnimationFrame(steps);
}
}
var surface, ctx, target, inProgress, cp1x, cp1y, cp2x, cp2y, skip1, skip2;
function $(e) {
return document.getElementById(e);
}
function draw(e, aa, bb) {
var x = e ? e.offsetX : aa;
var y = e ? e.offsetY : bb;
target.x.innerHTML = x;
target.y.innerHTML = y;
coordinates.push({
x,
y
});
//ctx.globalCompositeOperation = 'source-over';
ctx.shadowColor = "rgba(0,0,0,.5)";
ctx.shadowBlur = 2;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
if (!inProgress) {
ctx.beginPath();
ctx.moveTo(x, y);
inProgress = true;
skip1 = true;
skip2 = false;
} else {
if (skip1) {
cp1x = x;
cp1y = y;
skip1 = false;
skip2 = true;
}
if (skip2) {
cp2x = x;
cp2y = y;
skip1 = false;
skip2 = false;
} else {
//ctx.lineTo(x,y);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
//ctx.quadraticCurveTo(cp1x, cp1y, x, y);
skip1 = true;
skip2 = false;
}
}
ctx.stroke();
}
function captureTouch() {
surface.addEventListener('selectstart', function(e) {
e.preventDefault();
return false;
}, false);
surface.addEventListener('dragstart', function(e) {
e.preventDefault();
return false;
}, false);
surface.addEventListener('mousedown', function() {
$('msg').style.setProperty('display', 'none');
surface.addEventListener('mousemove', draw, false);
}, false);
surface.addEventListener('mouseup', function() {
surface.removeEventListener('mousemove', draw, false);
inProgress = false;
ctx.save();
}, false);
}
function init() {
surface = $('surface');
surface.width = document.body.clientWidth;
surface.height = window.innerHeight;
ctx = surface.getContext('2d');
target = {
x: $('x'),
y: $('y')
};
captureTouch();
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
}
document.addEventListener('DOMContentLoaded', init, false);* {
-webkit-user-select:none;
}
body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
#msg {
color:red;
font-weight:bold;
}
#coords{
background:#ffc;
border-bottom:1px solid #fc0;
}
#container {
position:relative;
}
#surface {
background:white;
}
.tp{
visibility:hidden;
position:absolute;
width:30px;
height:30px;
background:#999;
-webkit-border-radius:15px;
-webkit-box-shadow:inset white 0 0 15px 5px, white 0 0 2px 2px;
}<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Draw</title>
</head>
<body>
<div id="coords">
<div id="msg">Start drawing!</div>
X: <span id="x"></span>
Y: <span id="y"></span>
</div>
<button id="coordinatesBtn">Show coordinates of drawing</button>
<button id="coordinatesDrawBtn">Use coordinates to draw</button>
<div id="container">
<canvas id="surface"></canvas>
</div>
</body>
</html>