Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

Question

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

How can I prevent multiple instances of the same image from smearing across the canvas when drawing it? The platforms seem to stick together and not separate properly. Why do I have to clear the entire rectangle for everything to disappear?

Does anyone have any suggestions?

Code:

//////////////////////////////////////////////////////////
//
// MOVE PLATFORMS

var cFunc = 0;
var setRand = 1;
function setR() {
    setRand = setTimeout(setR, 10);
    cTAdd = Math.floor(Math.random() * 100 + 1);
}

var block00;
var block01; // ADD SEPARATION BLOCK(BLOCK HOLE)
var block02;
var block03;
var block04; // ADD SEPARATION BLOCK(BLOCK HOLE)
var block05;

function landT() {
    setThis = setTimeout(landT, 10);

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');

    ///////////////////////////////////////////////
        //
        // X POSITION OF (BLOCK HOLE)

        ///////////////////////////////////////////////////////////////////////////
        //
        // BOTTOM ROW

        block00 = document.createElement("img");
        block01 = document.createElement("img");
        block02 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 40) {
            block00.src = "images/sep2.png";
            context.drawImage(block00, moveBlock1, 315, 400, 28);
        }

        if (cTAdd > 40 && cTAdd < 80) {
            block01.src = "images/sep1.png"; // ADD SEPARATION BLOCK(BLOCK HOLE)
            context.drawImage(block01, moveBlock2, 315, 200, 28);
        }

        if (cTAdd > 80 && cTAdd < 100) {
            block02.src = "images/platform00.png";
            context.drawImage(block03, moveBlock3, 315, 158, 28);
        }


        ///////////////////////////////////////////////////////////////////////////
        //
        // BLOCK02 GET X POS OF ADDED BLOCK 

        if (getX1 == 0) { //////////////////////////////////////////// SET (BLOCK HOLE) X
            var doc2 = block02.getBoundingClientRect();
            gX1 = doc2.left;
            getX1 = 1;
        }


        ///////////////////////////////////////////////////////////////////////////
        //
        // TOP ROW

        block03 = document.createElement("img");
        block04 = document.createElement("img");
        block05 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 40) {
            block03.src = "images/sep2.png";
            context.drawImage(block03, moveBlock1, 165, 400, 28);
        }

        if (cTAdd > 40 && cTAdd < 80) {
            block04.src = "images/sep1.png"; // ADD SEPARATION BLOCK(BLOCK HOLE)
            context.drawImage(block04, moveBlock1, 165, 200, 28);
        }

        if (cTAdd > 80 && cTAdd < 100) {
            block05.src = "images/platform00.png";
            context.drawImage(block05, moveBlock1, 165, 158, 28);
        }

}

//////////////////////////////////////////////////////////
//
// MOVE PLATFORMS 

var thisSet = 1;
var cPlayer = 1;
var moveSpeed = 5;
var xPos = 50;
var yPos = 380;
function moveLand() {

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');

    thisSet = setTimeout(moveLand, 30);

    if (xPos >= 350 && moveL == 1) {
        moveBlock1 = moveBlock1 - 15;
    }

    if (gX1 > 0 && moveL == 1 && xPos >= 350) {
        gX1 = gX1 - 15;
    }
    if (getX1 == 1 && gX1 == 0) {
        getX1 = 0;
    }
    if (gX1 < 0) {
        gX1 = 0;    
    }


    console.log("X1: " + gX1); // CONSOLE/LOG gX1 

    if (moveBlock1 <= -1500) {
        moveBlock1 = 1000;
        moveBlock2 = 1300;
        moveBlock3 = 1600;
        context.clearRect(0, 0, 1023, 300); 
    }

}

javascript css html

Answer 1

Answer №1

Canvas does not retain any memory, so clearing it will result in everything disappearing.

However, the canvas is known for its speed. If you do not have complex image filtering operations (which would require using the slow getImageData()/putImageData), you can design your script to redraw everything at each frame:

var ctx = canvas.getContext('2d');

function draw(){
  drawBackground();
  player.draw();
  requestAnimationFrame(draw);
}

var drawBackground= function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle="#CCC";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  ctx.fillStyle="#000";
  ctx.fillRect(0,canvas.height-50,canvas.width, 50);
  ctx.beginPath();
  ctx.fillStyle="orange";
  ctx.arc(25,25,12,0,2*Math.PI,0);
  ctx.fill()
}

var player = new Player();
function Player(){
  var that = this;
  that.img = new Image;
  that.img.onload=draw;
  (that.init = function(){  
    that.img.src='http://lorempixel.com/50/50?121';
    that.x=canvas.width/2;
    that.y=canvas.height/2;
    that.width = 22;
    that.height = 22;
  })()
  that.update = function(){
    that.x += Math.random()*3-1.5;
    that.y += Math.random()*3-1.5;
    if(that.x-(that.width/2)<=0)that.x=that.width/2;
    if(that.x+(that.width/2)>=canvas.width)that.x=canvas.width-that.width/2;
    if(that.y-(that.height/2)<=0)that.y=that.height/2;
    if(that.y+(that.height/2)>=canvas.height-50)that.y=canvas.height-50-that.height/2;
  }
  that.draw = function(){
    console.log(that.x)
    that.update();
    ctx.drawImage(that.img, that.x, that.y, that.width, that.height);
  }
  return that;
}

<canvas id="canvas"></canvas>

If you are performing complex background operations and just want to draw a moving object on it at some point, you can create a clone of your canvas. Use the drawImage() method to copy your canvas onto the clone. Then, on each frame, redraw your original canvas along with the moving object:

// save the original
var cloned = canvas.cloneNode(true).getContext('2d');
cloned.drawImage(canvas, 0,0);

// Then after in the draw loop
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(cloned.canvas, 0,0);
drawYourMovingObject();

Answer 2

Canvas does not retain any memory, so clearing it will result in everything disappearing.

However, the canvas is known for its speed. If you do not have complex image filtering operations (which would require using the slow getImageData()/putImageData), you can design your script to redraw everything at each frame:

var ctx = canvas.getContext('2d');

function draw(){
  drawBackground();
  player.draw();
  requestAnimationFrame(draw);
}

var drawBackground= function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle="#CCC";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  ctx.fillStyle="#000";
  ctx.fillRect(0,canvas.height-50,canvas.width, 50);
  ctx.beginPath();
  ctx.fillStyle="orange";
  ctx.arc(25,25,12,0,2*Math.PI,0);
  ctx.fill()
}

var player = new Player();
function Player(){
  var that = this;
  that.img = new Image;
  that.img.onload=draw;
  (that.init = function(){  
    that.img.src='http://lorempixel.com/50/50?121';
    that.x=canvas.width/2;
    that.y=canvas.height/2;
    that.width = 22;
    that.height = 22;
  })()
  that.update = function(){
    that.x += Math.random()*3-1.5;
    that.y += Math.random()*3-1.5;
    if(that.x-(that.width/2)<=0)that.x=that.width/2;
    if(that.x+(that.width/2)>=canvas.width)that.x=canvas.width-that.width/2;
    if(that.y-(that.height/2)<=0)that.y=that.height/2;
    if(that.y+(that.height/2)>=canvas.height-50)that.y=canvas.height-50-that.height/2;
  }
  that.draw = function(){
    console.log(that.x)
    that.update();
    ctx.drawImage(that.img, that.x, that.y, that.width, that.height);
  }
  return that;
}

<canvas id="canvas"></canvas>

If you are performing complex background operations and just want to draw a moving object on it at some point, you can create a clone of your canvas. Use the drawImage() method to copy your canvas onto the clone. Then, on each frame, redraw your original canvas along with the moving object:

// save the original
var cloned = canvas.cloneNode(true).getContext('2d');
cloned.drawImage(canvas, 0,0);

// Then after in the draw loop
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(cloned.canvas, 0,0);
drawYourMovingObject();

Answer 3

Answer №2

I created this animation using the Tryit editor on w3schools.com. The code below demonstrates how to move an image across a canvas without repeating.

<!DOCTYPE html>
<html>
<body onLoad = "getII()">

<canvas id="myCanvas" width="1200" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var inum = 10;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(2000, 2000);
var target_area = ctx.getImageData(10, 10, 2000, 2000);

var i;
for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i+0] = 255;
    imgData.data[i+1] = 0;
    imgData.data[i+2] = 0;
    imgData.data[i+3] = 255;
}

function getII() {
  var setThis = setTimeout(getII, 100);
  inum = inum + 10;

  ctx.putImageData(target_area, 10, 10);
  ctx.fillRect(inum, 10, 100, 100);
  target_area = context.getImageData(10, 10, 2000, 2000);
  ctx.putImageData(target_area, 10, 10);
  ctx.fillRect(inum, 10, 100, 100);
}


</script>

</body>
</html>

Answer 4

I created this animation using the Tryit editor on w3schools.com. The code below demonstrates how to move an image across a canvas without repeating.

<!DOCTYPE html>
<html>
<body onLoad = "getII()">

<canvas id="myCanvas" width="1200" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var inum = 10;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(2000, 2000);
var target_area = ctx.getImageData(10, 10, 2000, 2000);

var i;
for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i+0] = 255;
    imgData.data[i+1] = 0;
    imgData.data[i+2] = 0;
    imgData.data[i+3] = 255;
}

function getII() {
  var setThis = setTimeout(getII, 100);
  inum = inum + 10;

  ctx.putImageData(target_area, 10, 10);
  ctx.fillRect(inum, 10, 100, 100);
  target_area = context.getImageData(10, 10, 2000, 2000);
  ctx.putImageData(target_area, 10, 10);
  ctx.fillRect(inum, 10, 100, 100);
}


</script>

</body>
</html>

Answer 5

Answer №3

One way to create animation of a shape on a Canvas is by following these steps. Firstly, you need to copy the specific portion of the canvas where you want to draw the shape. Next, draw the shape in that area. When it's time to move the shape, redraw the copied area to erase the shape and repeat the process in the new location. To achieve this, you can utilize Canvas.getImageData() and putImageData(). You can find more information about these methods on this w3cschools page

I have successfully used this approach to make a shape on a canvas follow the mouse cursor.

Below is an example code snippet to demonstrate this concept:

var context = myCanvas.getContext("2d");

// Copy the current area of the canvas
var target_area = context.getImageData(10, 10, 50, 50);

// Draw a rectangle in that area
context.fillRect(15, 15, 40, 40);

// Redraw the copied area to "erase" only the rectangle
context.putImageData(target_area, 10, 10);

// Repeat the process for another area
target_area = context.getImageData(10, 15, 50, 50);

// Draw a rectangle at the new location
context.fillRect(15, 20, 40, 40);

// Restore the copied image to "erase" the previous rectangle
context.putImageData(target_area, 10, 15);

// Keep repeating these steps for animation

Answer 6

One way to create animation of a shape on a Canvas is by following these steps. Firstly, you need to copy the specific portion of the canvas where you want to draw the shape. Next, draw the shape in that area. When it's time to move the shape, redraw the copied area to erase the shape and repeat the process in the new location. To achieve this, you can utilize Canvas.getImageData() and putImageData(). You can find more information about these methods on this w3cschools page

I have successfully used this approach to make a shape on a canvas follow the mouse cursor.

Below is an example code snippet to demonstrate this concept:

var context = myCanvas.getContext("2d");

// Copy the current area of the canvas
var target_area = context.getImageData(10, 10, 50, 50);

// Draw a rectangle in that area
context.fillRect(15, 15, 40, 40);

// Redraw the copied area to "erase" only the rectangle
context.putImageData(target_area, 10, 10);

// Repeat the process for another area
target_area = context.getImageData(10, 15, 50, 50);

// Draw a rectangle at the new location
context.fillRect(15, 20, 40, 40);

// Restore the copied image to "erase" the previous rectangle
context.putImageData(target_area, 10, 15);

// Keep repeating these steps for animation

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

Answer №1

Answer №2

Answer №3

Similar questions

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Error encountered during Ajax request - two files being transmitted instead of one

Encountering a npm script error while running on a Windows operating

Can users arrange a lineup of choices?

The PHP file on the server is missing the mandatory "event" parameter for the EventSource

What is causing the spinner with CSS rotation transform to bounce rhythmically?

a new webpage beginning from a different location

Having trouble getting Fullcalendar to show up on my cordova app

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

Having trouble getting my ReactJS page to load properly

Mapping an array based on specific conditions

When transmitting an ajax POST FormData object, the key and value may not be transmitted as originally configured

When trying to search for 'elForm' using the 'in' operator within the context of a "datetime" type, the error "Unable to find 'elForm' in undefined" occurs

Date Selector Tool for Input Field

At what point in time does the LoadingFrameComplete event in Awesomium typically happen?

"Trouble encountered while trying to display Angular in an HTML document

Customizing Ngx-bootstrap Carousel Indicator, Previous, and Next Button Styles

What is the best way to align two HTML elements in a single column?

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

Successive vows