Html5 Canvas to Canvas Blit

StackOverflow https://stackoverflow.com/questions/16843105

  •  30-05-2022
  •  | 
  •  

Question

I need to set up a background canvas with a load of images drawn on at various places. Nothing changes on this background, so I want to do it all at once. I think I know how to do that. Then each frame I want to copy that background canvas (ultimately just a part of it) to my main screen canvas people see.

I am doing the following:

g_CanvasScreen = document.getElementById("m_Canvas");
g_CanvasScreenContext = g_CanvasScreen.getContext("2d");

g_OffScreenBackground = document.createElement("canvas");
g_OffScreenBackgroundContext = g_CanvasScreen.getContext("2d");

I believe this gets the main screen canvas from the hmtl5 page g_CanvasScreen.

I believe g_OffScreenBackground is a newly created canvas in memory.

Once all images have loaded I then draw all the images in the correct places to the background screen by calling the function:

DrawMapToBackground(g_OffScreenBackground, g_OffScreenBackgroundContext, 2000, 1600);

2000 x 1600 is the size of the offscreen background.

This then leads to the thing I am not sure about. I believe this will blit the background canvas to the main screen:

g_CanvasScreenContext.drawImage(g_OffScreenBackground,
    0, 0, g_OffScreenBackground.width, g_OffScreenBackground.height,
    screenX, screenY, g_OffScreenBackground.width, g_OffScreenBackground.height);

Is this last function correct? Can I do a canvas to canvas blit? Should I be doing this another way?

Was it helpful?

Solution

Instead of redrawing the background each time, just put 2 canvas’s on top of each other.

First draw the background image once on the bottom canvas.

Then use the top canvas to draw all your “changing” drawings.

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/pSjEt/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
#container{
  position:relative;
  border:1px solid blue;
  width:500px;
  height:300px;
}
.subcanvs{
  position:absolute;
  width:100%;
  height:100%;
}
</style>

<script>
$(function(){

    var bk=document.getElementById("background");
    var bkCtx=bk.getContext("2d");
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var bkimg=new Image();
    bkimg.onload=function(){
      bk.width=bkimg.width;
      bk.height=bkimg.height;
      canvas.width=bkimg.width;
      canvas.height=bkimg.height;
      bkCtx.drawImage(bkimg,0,0);
      draw();
    }
    bkimg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";

    var x=50;

    function draw(){
        x+=5;
        if(x>300){x=50;}
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(x,100,30,0,Math.PI*2,false);
        ctx.strokeStyle="gold";
        ctx.fillStyle="yellow";
        ctx.lineWidth=5;
        ctx.stroke();
        ctx.fill();
        setTimeout(draw,1000);
    }

});   // end $(function(){});
</script>
</head>

<body>
    <div id="container">
      <canvas id="background" class="subcanvs"></canvas>
      <canvas id="canvas" class="subcanvs"></canvas>
    </div>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top