Develop Reference

Clear HTML canvas [duplicate]

This question already has answers here:
clearRect function doesn't clear the canvas
(5 answers)
Closed 3 years ago.
I want an HTML canvas that displays mouse position on its JS grid on mouse move, but I can't seem to clear my canvas, I tried using ctx.clearRect(0,0 canvas.width, canvas.height) and clearing with a click, but it somehow remembers the previous draw it had. I want only one black square to be displayed on canvas at a time depending on the mouse position. Heres demo on code pen and some code
<canvas id="myMap" style="width: 300px;height: 300px;background-color: beige;"></canvas>
<script>
var findDivisible = (x, scale) => {
while (x % scale !== 0 && x > 0) {
x = x - 1;
};
return x
};
var map = document.getElementById("myMap");
map.width = 300;
map.height = 300;
var mapContext = document.getElementById("myMap").getContext("2d");
map.addEventListener("mousemove", function(e) {
mapContext.clearRect(0, 0, map.width, map.height);
mapContext.rect(findDivisible(e.clientX - map.offsetLeft, 50), findDivisible(e.pageY - map.offsetTop, 50), 50, 50);
mapContext.stroke();
});
map.addEventListener("click", function() {
mapContext.clearRect(0, 0, 500, 500);
})
</script>

You're not starting a new stroke for each rectangle, but "piling them up" so they get re-re-redrawn with .stroke().
Use .beginPath():
function findDivisible(x, scale) {
while (x % scale !== 0 && x > 0) {
x = x - 1;
}
return x;
}
var map = document.getElementById("myMap");
map.width = 300;
map.height = 300;
var mapContext = map.getContext("2d");
map.addEventListener("mousemove", function(e) {
mapContext.clearRect(0, 0, map.width, map.height);
mapContext.beginPath();
mapContext.rect(
findDivisible(e.clientX - map.offsetLeft, 50),
findDivisible(e.pageY - map.offsetTop, 50),
50,
50,
);
mapContext.stroke();
});
map.addEventListener("click", function() {
mapContext.clearRect(0, 0, 500, 500);
});
<canvas id="myMap" style="width: 300px;height: 300px;background-color: beige;"></canvas>

You can try this:
map.addEventListener("mousemove", function(e){
map.width = map.width;
mapContext.rect(findDivisible(e.clientX-map.offsetLeft,50) , findDivisible(e.pageY - map.offsetTop,50), 50, 50);
mapContext.stroke();
});
map.addEventListener("click", function(){
map.width = map.width;
});
One of the ways that is implicitly endorsed in the spec and often used in people’s apps to clear a canvas
https://dzone.com/articles/how-you-clear-your-html5

HTML Canvas: ctx.stroke restroke behaviour with transparent colors

I am working on a sketch tool with html canvas.
I am using a common algorithm for this, that uses the mousedown, mousemove, mouseup events.
mousedown
I beginPath(), and moveTo(// the mouse coordinates).
mousemove
I draw lineTo(// the mouse coordinates), and then stoke(// the line to render it)
mouseup
I do nothing, // closePath()
And I noticed that, calling the stroke method without first calling closePath or beginPath, will redraw or restroke all previous paths or lines, which makes them appear thicker than the define color.
without a transparent color its is barely noticeable, but the colors do appear thicker than they should be.
but with color with transparency|alpha e.g. rgba(). The most recent path or line respects the color's transparency, but all previous line due to the redraw, the transparent colored line overlap and that causes previous lines to get thicker in sequence or succession.
is there a way to avoid|prevent this behavior. thank in advance.
sample is below, try drawing really fast!
var cvs = document.querySelector("canvas");
cvs.width = cvs.parentElement.clientWidth;
var colorInput = document.querySelector("input");
var ctx = cvs.getContext("2d");
ctx.strokeStyle = "rgba(0, 0, 0, 0.4)"
ctx.lineWidth = 20;
onDraw(cvs, {
penDown: function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
ctx.strokeStyle = colorInput.value;
ctx.beginPath();
ctx.moveTo(x, y);
},
penMove: function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
},
penUp: function() {
// ctx.closePath;
}
});
function onDraw(node, drawHandler, beginHandler, endHandler, outOfBoundHandler, sticky) {
var mouseDown = false, mouseOut = false;
if( typeof drawHandler === "object" ) {
var drawEvents = drawHandler;
drawHandler = get(drawEvents.penMove);
beginHandler = get(drawEvents.penDown);
endHandler = get(drawEvents.penUp);
outOfBoundHandler = get(drawEvents.penOff);
sticky = drawEvents.sticky;
}
function get(name) {
return typeof name === "string" ? drawEvents[ name ] : name;
}
node.addEventListener('mousedown', function(e) {
mouseDown = true;
beginHandler&&beginHandler.call(this, e);
});
node.addEventListener('mousemove', function(e) {
mouseDown&&drawHandler&&drawHandler.call(this, e);
});
node.addEventListener('mouseup', function(e) {
mouseDown = false;
endHandler&&endHandler.call(this, e);
});
node.addEventListener('mouseout', function(e) {
mouseDown&&outOfBoundHandler&&outOfBoundHandler.call(this, e);
if( !sticky ) {
mouseDown = false;
}
});
}
.wrapper { border: 1px solid #aaa }
<div class="wrapper">
<canvas border="1" width="600" hieght="400">Canvas is not supported</canvas>
<input type="text" value="rgba(0, 0, 0, 0.3)" placeholder="rgba(#, #, #, #)">
</div>

If no Path argument is passed to stroke and fill methods they will use the path currently being declared with the context's drawing methods.
const ctx = c.getContext('2d');
// starts Path declaration
ctx.moveTo(20, 20);
ctx.lineTo(30, 80);
ctx.stroke(); // first rendering
setTimeout(() => {
ctx.clearRect(0, 0, 300, 150); // even if we clear the canvas
ctx.lineTo(70, 20); // this will continue path declaration
setTimeout(() => {
ctx.stroke(); // and this will draw everything
}, 1000);
}, 1000);
<canvas id="c"></canvas>
The only ways to start a new path declaration (except for the first one) are to either reset the whole context (not good), or to use beginPath method.
const ctx = c.getContext('2d');
// starts Path declaration
ctx.moveTo(20, 20);
ctx.lineTo(30, 80);
ctx.stroke(); // first rendering
setTimeout(() => {
ctx.clearRect(0, 0, 300, 150);
ctx.beginPath(); // start a new Path declaration
ctx.moveTo(30, 80); // we need to move to the previous coords
ctx.lineTo(70, 20); // this will be alone
ctx.stroke(); // and this will draw only the new path
}, 1000);
<canvas id="c"></canvas>
About closePath, it's just a lineTo(last_point_in_current_path_declaration), and doesn't ends a path declaration in no way.
So for your problem, there are two strategies you can adopt :
keep only the last coordinates, and at every mousemove,
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(nextX, nextY);
keep all your coordinates in an array and redraw everything every time
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
coords.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
Personally, I prefer the second one, which allows some undo - redo, and to e.g change your pen's style.

How to move shapes from its new instance by requestAnimationFrame?

Here is the fiddle.
Small rectangle will be created to simulate a bullet when the spacebar(keycode 32) is pressed. I encountered some problems: How to move them yo the top (decrease the y coordinate)?
Can anyone help me? Thx!
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var ps = false;
init();
function init(){
context.rect((cw-5)/2, ch-5, 5, 5);
context.fill();
update();
}
function update(){
if(ps){
playerShoot();
}
requestAnimationFrame(update);
}
function playerShoot(){
var b = new bullet(2);
}
function bullet(speed){
this.speed = speed;
speed++;
context.ellipse((cw-1)/2, ch-10-speed, 1, 3, 0, 0, Math.PI*2);
context.fill();
}
document.addEventListener("keydown", function(e){
switch(e.keyCode){
case 32:
ps = true;
break;
};
});
document.addEventListener("keyup", function(e){
switch(e.keyCode){
case 32:
ps = false;
break;
};
});

I've explained a lot of the code in the comments in the code itself.
A couple of other points:
Some browsers (including mine, i.e. Firefox v44.0.2) don't draw ellipses. So I've made your bullet another rectangle.
I used fillRect instead of rect just because I know that better.
I redrew the bullet by drawing over the old one with the opaque background color. However, you could also clear the rectangle around the previous bullet if you wanted.
You incremented speed in your example. That's probably not what you want from a conceptual point of view, even if you had gotten the visual results that you want. I suspect you want your bullets to move at a constant speed. Therefore, the speed variable should be constant, i.e. not change. Rather, you should use the speed constant to regularly change the position of the bullet. I changed bulletY, which is the vertical position of the bullet.
For simplicity, I've only allowed one bullet on the screen at a time.
I've limited the code to running 500 cycles. That's mostly to just not annoy Stack Overflow users who try the code...they don't want an infinite loop happening.
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var ps = false;
// some new variables
var bulletShowing = false; // is a bullet currently showing?
var bulletY; // the vertical position of the bullet
var speed = 8; // the bullet speed
var time = 500; // the time remaining
init();
function init() {
// draw background
context.fillStyle = "yellow";
context.fillRect(0, 0, cw, ch);
// draw gun
context.fillStyle = "black";
context.fillRect((cw - 5) / 2, ch - 5, 5, 5);
// update the scene
update();
}
function update() {
if (ps) {
playerShoot();
}
// if a bullet is supposed to be showing then, well, show it
if (bulletShowing) {
// redraw the bullet (erase the old, draw the new)
drawBullet();
// if the bullet has gone off-screen, allow a new shot
if (bulletY < -5) {
bulletShowing = false;
}
}
// give a visual indicator of time remaining
document.querySelector("div").innerHTML = "Time: " + time;
// decrement the time
time -= 1;
// if there is still time remaining, do it all again
if (time >= 0) {
requestAnimationFrame(update);
}
}
function playerShoot() {
// indicate a bullet will now be showing
bulletShowing = true;
// start the bullet out near the gun
bulletY = ch - 10;
}
function drawBullet() {
// erase the old bullet by drawing over it with the background color
// this rectangle is slightly larger than the bullet itself
// to ensure the entire old bullet is drawn over
context.fillStyle = "yellow";
context.fillRect((cw - 1) / 2 - 2, bulletY - 1, 5, 7);
// move the bullet position
bulletY -= speed;
// draw the new bullet
context.fillStyle = "black";
context.fillRect((cw - 1) / 2 - 1, bulletY, 3, 5);
}
document.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32:
// only allow one bullet on the screen at a time
// (for the sake of coding simplicity)
if (!bulletShowing) {
ps = true;
}
break;
};
});
document.addEventListener("keyup", function(e) {
switch (e.keyCode) {
case 32:
ps = false;
break;
};
});
#myCanvas {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 5%);
background-color: #cccccc;
z-index: -1;
}
<p>Click on the canvas, then use the space bar to fire bullets one at a time.</p>
<div></div>
<canvas id="myCanvas" width=300 height=150></canvas>

HTML5 arrow keys not working correctly

Hello everyone,
I'm currently having issues making the arrow keys working correctly while pressing [space] key. Everything is working whle holding [space] key and one of the arrow keys. But if I try to press [space] and hold [up] and [left] at the same time , it will go straigh to the top of the screen as if the [left] key wasn't even pressed (it should move diagonally to the top left corner). This is only happening while pressing [space].
I'd like to use this key for shooting bullets later on.
Is there something wrong in my code? Or is it some kind of bug?
Apologies for my bad english :/ ..
<!DOCTYPE html>
<body>
<canvas id="myCanvas" width="568" height="262">
</canvas>
<script type="text/javascript">
var canvas;
var ctx;
var dx = 0.5;
var dy = 0.5;
var x = 284;
var y = 130;
var WIDTH = 568;
var HEIGHT = 262;
var keys = new Array();
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
window.addEventListener('keydown',doKeyDown,true);
window.addEventListener('keyup',doKeyUp,true);
return setInterval(draw, 1);
}
function draw() {
move();
clear();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
rect(0,0,WIDTH,HEIGHT);
// player ///
ctx.fillStyle = "purple";
circle(x, y, 20);
}
function doKeyDown(evt)
{
keys[evt.keyCode] = true;
evt.preventDefault(); // Prevents the page to scroll up/down while pressing arrow keys
}
function doKeyUp(evt){
keys[evt.keyCode] = false;
}
function move() {
if (32 in keys && keys[32]){
; // fire bullets
}
if (38 in keys && keys[38]){ //up
y -= dy;
}
if (40 in keys && keys[40]){ //down
y += dy;
}
if (37 in keys && keys[37]){ //left
x -= dx;
}
if (39 in keys && keys[39]){ //right
x += dx;
}
}
init();
</script>
</body>
</html>

Odds are this is nothing to do with your code. Many keyboards, to save cost, are not capable of supporting every combination of 3 or more keys at once, and are specifically wired to support combinations that are in common use (such as Ctrl+Alt+Del). The phenomenon is known as "ghosting".
See this page from Microsoft for an expanded explanation.

I had the same issue (I found the issue but not the solution) the key codes for up and left follow each other. so do down and right. The fact that the key codes follow each other seems to be the issue. if you set A to move player UP and B to move player DOWN, then press A+B+spaceBar the same issue occurs. but when the key codes are different (e.g. wasd) the three button press works. using WASD might seem like a good idea but wait until someone using a French keyboard plays your game.
Any way I wrote this hoping that someone would find a work around.

Background image translate?

I'm attempting to get basic side scroller movement down in canvas, and I'm in a good spot with the movement itself, but I can't seem to get the background to translate. Perhaps I'm misunderstanding how translate works? The main canvas is translating fine (the one the 'player' is on) but the bg canvas won't budge.
http://jsfiddle.net/Y5SG8/1/
Fullscreen: http://jsfiddle.net/Y5SG8/1/embedded/result/
Any help would be greatly appreciated.
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('canvas'),
bg = document.getElementById('canvas2'),
ctx = canvas.getContext('2d'),
bgctx = bg.getContext('2d'),
width = 1280,
height = 720,
player = {
x: width/2,
y: height/2 - 15,
width: 16,
height: 24,
speed: 3,
velx: 0,
vely: 0,
jumping: false
},
keys = [],
friction = 0.9,
gravity = 0.3;
canvas.addEventListener('keydown', function(e) {keys[e.keyCode] = true;})
canvas.addEventListener('keyup', function(e) {keys[e.keyCode] = false;})
canvas.width = width;
canvas.height = height;
bg.width = width;
bg.height = height;
var bgimg = new Image();
bgimg.src = 'bg.png';
bgimg.onload = function bgload() {bgctx.drawImage(bgimg,0,0);}
function playerupdate() {
if (keys[68]) {
if (player.velx < player.speed) {player.velx++;}
}
if (keys[65]) {
if (player.velx > -player.speed) {player.velx--;}
}
player.velx *= friction;
player.x += player.velx;
ctx.translate(-player.velx,0);
bgctx.translate(player.velx,0);
ctx.clearRect(player.x, player.y, player.width, player.height);
ctx.fillStyle = '#FF0000'
ctx.fillRect(player.x, player.y, player.width, player.height);
requestAnimationFrame(playerupdate);
console.log(player.x)
}
window.onload = playerupdate();

Short answer, the translate function translates the context of the canvas, but it does not redraw, so you'd need to:
// note you probably want the ctx to translate in the opposite direction of
// the player's velocity if you want the appearance of movement (if that's
// what you want)
bgctx.translate(-player.velx, 0);
bgctx.clearRect(0, 0, bg.width, bg.height);
bgctx.drawImage(bgimg, 0, 0);
Knowing that, you can probably figure it out from there. If your background is non-repeating (and you prevent the player from moving off the edges), then this might be the solution.
If your background is repeatable, you'll need to do a bit more work, as translating the image will quickly move it off screen. You can solve this by drawing a repeating fill created from the image rather than drawing in the image itself, something like:
// on image load, replacing your initial `drawImage`
bgimg.onload = function bgload() {
var ptrn = bgctx.createPattern(bgimg, 'repeat');
bgctx.fillStyle = ptrn;
bgctx.fillRect(0, 0, bg.width, bg.height);
}
// then in the loop
bgctx.translate(-player.velx, 0);
// Here you'd fill a square *around* the player, instead of just
// repainting the image.
bgctx.fillRect(player.x - width/2, 0, bg.width, bg.height);

As #numbers1311407 says in his answer you will need to redraw the image.
But translate is strictly not necessary here - just redraw the image into a new position instead.
bgctx.drawImage(bgimg, -player.velx, 0);
Modified fiddle
You don't even need to use clear as the image will overdraw anything - the only thing you need to take care of is wrapping/tiling when the image is out of "bound" or you will get tearing (that applies to both approaches).