You can use compositing to restrict your drawing to the tv’s screen only
Advantages:
- There's just the canvas element--no need to coordinate img+canvas with CSS.
- You can draw into a non-rectangular tv screen.
- You can use the tv screen like a "viewport".
- If resizing, keeping the viewport positioned properly is simpler.
It works like this:
Draw an image of a tv to your canvas:
ctx.drawImage(tv,0,0,tv.width,tv.height);
The important thing about this tv image is that the screen has transparent pixels
Before you draw anything to your screen, set the compositing to “destination-over”. This causes canvas to preserve any non-transparent pixels that are already drawn on the screen (the tv) and to only draw into the transparent pixels (your tv screen).
Result: you’re ONLY drawing to the tv’s screen. The rest of the tv is preserved.
ctx.globalCompositeOperation="destination-over";
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/7JPrx/
<!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>
body{ background-color: white; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tv=new Image();
var land=new Image();
tv.onload=function(){
land.onload=function(){
draw();
}
land.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape.png";
}
tv.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tv1.png";
var offsetX=0;
function draw(){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the tv
// NOTE: the screen of the tv must be transparent
ctx.drawImage(tv,0,0,tv.width,tv.height);
// begin drawing the screen
ctx.save();
ctx.beginPath();
// this causes any drawing to ONLY draw over transparent pixels
// that's how we draw within the screen because
// the screen is the only part of the tv with transparent pixels
ctx.globalCompositeOperation="destination-over";
// move (translate) our drawing to the screen part of the tv image
ctx.translate(32,95);
// draw the landscape scrolling across the screen (using offsetX)
ctx.drawImage(land,offsetX,0);
// reset
ctx.restore();
offsetX-=10;
if(offsetX<=-600){offsetX=0;}
setTimeout(draw,100);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
