How I can move a element inside canvas without deleting all inside content with context.clearRect()
?
For example:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.src = 'https://image.freepik.com/free-vector/silhouette-forest-background_8589-304.jpg';
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}
window.onload = function()
{
context.fillStyle = 'red';
context.fillRect(20, 300, 60, 60);
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…