I'm trying to put multiple js animations on one html page. I've started my testing with just two animations. I figured once I learn how to implement two, I can easily implement ten.
I'm using Flash CC to publish html5 canvas animations (which outputs a simple html file and a js file). One animation is called "ship" and the other is called "car". As it stands, only "ship" is appearing on screen.
Below is my code. (Also there's a link for all the source files.) I'm no javascript/coding expert, but I am a troubleshooter/experimenter. I've repositioned code, tried renaming variables, etc. I'm pretty sure the big hangup is the createjs variable. I see that the createjs variable isn't called anywhere else on the page... so i'm guessing that it's being used in the remote js script(s)? I've commented out the var createjs = createjs_car because if it's not commented, no animation appears.
Anyhow, I'm looking for help to get two (or more) animations working on the same page. Thanks in advance!
Want the source files? Click here:
Click here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations on One Page</title>
<script>
// change the default namespace for the CreateJS libraries:
var createjs_ship = createjs_ship||{};
var createjs = createjs_ship;
</script>
<!-- I've commented this out because if the commenting is removed, no animation shows up.
<script>
// change the default namespace for the CreateJS libraries:
var createjs_car = createjs_car||{};
var createjs = createjs_car;
</script>-->
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
var canvas, stage, exportRoot;
function init_ship() {
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs_ship.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs_ship.Ticker.setFPS(libs_ship.properties.fps);
createjs_ship.Ticker.addEventListener("tick", stage);
}
function init_car() {
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs_car.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs_car.Ticker.setFPS(libs_car.properties.fps);
createjs_car.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init_ship(); init_car();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
so I've got both playing together by:
replacing references to createjs_XXX with create_js in both car.js, ship.js and the init function
removing the associated variable instantiations
combining init functions
please see below and a codepen example here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations on One Page</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init() {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
JAVASCRIPT:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 300,
height: 250,
fps: 24,
color: "#FFFFFF",
manifest: []
};
// symbols:
(lib.ship_1 = function() {
this.initialize();
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#0E586C").s().p("ArnDcQiHigAjkXIaeAAQh0Dbl1Dcg");
this.shape.setTransform(85.1,113);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#C0D0D7").s().p("AnFGVQDllvjlm6IMoAAQDHGnjHGCg");
this.shape_1.setTransform(101.6,40.5);
this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,170.3,135);
// stage content:
(lib.ship = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 2
this.instance = new lib.ship_1();
this.instance.setTransform(-4.9,107.5,1,1,0,0,0,85.2,67.5);
this.timeline.addTween(cjs.Tween.get(this.instance).to({x:390.1},128).wait(1));
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#9DC7D7").s().p("A3bIIIAAwPMAu2AAAIAAQPg");
this.shape.setTransform(150,52);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#438896").s().p("A3bLaIAA2yMAu2AAAIAAWyg");
this.shape_1.setTransform(150,177);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(59.9,125,390.2,250);
})(libs_ship = libs_ship||{}, images_ship = images_ship||{}, createjs = createjs||{}, ss = ss||{});
var libs_ship, images_ship, createjs, ss;
JAVASCRIPT:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 300,
height: 250,
fps: 24,
color: "#FFFFFF",
manifest: []
};
// symbols:
(lib.ship = function() {
this.initialize();
// Layer 2
this.shape = new cjs.Shape();
this.shape.graphics.f("#000000").s().p("AGgBwQgvguAAhCQAAhBAvgvQAvguBDAAQBCAAAuAuQAwAvAABBQAABCgwAuQguAwhCgBQhDABgvgwgAqCBwQgugugBhCQABhBAugvQAvguBCAAQBDAAAvAuQAuAvABBBQgBBCguAuQgvAwhDgBQhCABgvgwg");
this.shape.setTransform(84.2,140);
// Layer 1
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#E58A2B").s().p("AtYDcQgwjHDUhZICqAAQBGiGAygRIJ+AAQBvAzA7B3IFoAxQBSBNASCPg");
this.shape_1.setTransform(86.5,113);
this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-0.1,91,173.3,65);
// stage content:
(lib.car = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 2
this.instance = new lib.ship();
this.instance.setTransform(-4.9,107.5,1,1,0,0,0,85.2,67.5);
this.timeline.addTween(cjs.Tween.get(this.instance).to({x:390.1},128).wait(1));
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A57F57").s().p("A3bIIIAAwPMAu2AAAIAAQPg");
this.shape.setTransform(150,52);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#666666").s().p("A3bLaIAA2yMAu2AAAIAAWyg");
this.shape_1.setTransform(150,177);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(59.7,125,390.3,250);
})(libs_car = libs_car||{}, images_car = images_car||{}, createjs = createjs||{}, ss = ss||{});
var libs_car, images_car, createjs, ss;
Related
I have written an A-Frame component that creates a canvas on which it writes an image. The image is generated dynamically from HTML. The HTML is created when a message arrives from a server, using WebSockets, asynchronously. The problem is that most often (but not always) the canvas is drawn blank. I have tested the component using hardcoded HTML, and it works just as expected, so the issue must be one of timing, but I don't know why or how to solve it.
Schematically, the code is:
In a JS module file, vr.js:
// Observe the arrival of the websocket message, then
// Create the HTML based on the message and save it as 'legend'
let legendBox = document.getElementById('legend')
legendBox.innerHTML = legend
legendBox.components.showHTML.update();
In the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../js/vr.js" type="module"></script>
AFRAME.registerComponent('showHTML', {
init: function () {},
update: function () {
if (this.el.getObject3D('screen')) this.remove()
if (this.el.innerHTML.trim() === '') return
this.htmlcanvas = new HTMLCanvas(this.el)
let texture = new THREE.CanvasTexture(this.htmlcanvas.canvas)
texture.minFilter = THREE.LinearFilter
texture.wrapS = THREE.ClampToEdgeWrapping
texture.wrapT = THREE.ClampToEdgeWrapping
let material = new THREE.MeshBasicMaterial({
map: texture,
transparent: true,
})
let geometry = new THREE.PlaneGeometry(1, 1)
let screen = new THREE.Mesh(geometry, material)
this.el.setObject3D('screen', screen)
this.screen = screen
this.resize()
},
resize() {
this.width = this.htmlcanvas.width / this.data.ppu
this.height = this.htmlcanvas.height / this.data.ppu
this.screen.scale.x = Math.max(0.0001, this.width)
this.screen.scale.y = Math.max(0.0001, this.height)
this.htmlcanvas.render()
},
remove: function () {
this.el.removeObject3D('screen')
},
})
class HTMLCanvas {
constructor(html) {
if (!html) throw 'Container Element is Required'
// Create the canvas to be drawn to
this.canvas = document.createElement('canvas')
this.ctx = this.canvas.getContext('2d')
// code to extract the innerHTML from the entity, transform it into an SVG,
// and load the SVG into an image -- all omitted for simplicity
// Renders the image containing the SVG to the Canvas
render() {
this.canvas.width = this.width
this.canvas.height = this.height
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.drawImage(this.img, 0, 0)
}
} // end class
} // end of component
</head>
<body>
<a-scene>
// usual A-Frame entities omitted
<a-entity id="legend" position="-1 1 -2" showHTML></a-entity>
// more A-Frame stuff including camera etc.
</a-scene>
</body>
</html>
I'm trying out Babylon.js. I want to set my floor texture but it doesn't work. I get the following error:
"Uncaught TypeError: _this.getScene is not a function" (for google search)
I really don't get this, the youtube tutorial made it seem so easy.
Source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var floor = BABYLON.MeshBuilder.CreateBox("floor", { height: 25, width: 800, depth: 900 }, scene);
floor.position.y = -162.5;
floor.position.x = 100;
floor.position.z = 400;
var camera = new BABYLON.ArcRotateCamera(
'camera1',
BABYLON.Tools.ToRadians(45),
BABYLON.Tools.ToRadians(45),
1000.0,
new BABYLON.Vector3(0, 50, 400),
scene);
camera.attachControl(canvas, true);
var light = new BABYLON.PointLight("pointlight", new BABYLON.Vector3(800, 700, 1000), scene);
light.diffuse = new BABYLON.Color3(1, 1, 1);
var floormaterial = new BABYLON.StandardMaterial("floormaterial", scene);
floormaterial.diffuseTexture = BABYLON.Texture("floor.png", scene);
floor.material = floormaterial;
return scene;
};
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
});
</script>
</body>
</html>
If I remove the "floormaterial.diffuseTexture = BABYLON.Texture("floor.png", scene);" line everything works perfectly.
you are missing the new before the texture. the line should be:
floormaterial.diffuseTexture = new BABYLON.Texture("floor.png", scene);
I am not a real programmer but have done some small projects in JavaScript. I am now working on a small app backing up a scientific poster. The script works, but the cursor (cross) and the other field, both bit maps do not appear before the page is reloaded. Same behavior in several browsers. I found out that the onload function is not run. But the first one img is run. I don't understand why.
I did some googling and found references to the problem but did not really understand it.
Could somebody be so kind and help me?
I made a versjon with only the essential gode:
URL: http://folk.uio.no/gerald/IADMFR2017/test.html
Here is the source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Increasing clinical relevance in oral radiology through computer-based examination?</title>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
function init() {
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
stage.enableMouseOver();
createjs.Touch.enable( stage );
img = new Image();
img.src = 'images/radiograph.png';
img.onload = function(event) {
var bitmap = new createjs.Bitmap('images/radiograph.png');
bitmap.x = 50;
bitmap.y = 80;
bitmap.on("click", handleMouseEvent);
stage.addChild(bitmap);
stage.update();
}
fieldIm = new Image();
fieldIm.src = 'images/field.png';
var field;
fieldIm.onload = function(event) {
field = new createjs.Bitmap('images/field.png');
field.scaleX=0.9;
field.scaleY=0.9;
field.x=400;
field.y=100;
field.visible = false;
stage.addChild(field);
stage.update();
}
crossIm = new Image();
crossIm.src = 'images/cross.png';
var cross;
crossIm.onload = function(event) {
cross = new createjs.Bitmap('images/cross.png');
cross.scaleX=0.5;
cross.scaleY=0.5;
cross.zIndex = 500;
cross.visible = false;
stage.addChild(cross);
stage.update();
}
stage.update();
function handleMouseEvent(evt) {
cross.x = evt.rawX - 12;
cross.y = evt.rawY - 12;
cross.visible = true;
stage.update();
}
var rect = new createjs.Rectangle(0, 0, 180, 30);
var frg = '#FFFFFF';
var bkg = '#000000';
var container = new createjs.Container();
container.x = 450;
container.y = 500;
var rectShape = new createjs.Shape();
rectShape.graphics.c().f(bkg).dr(0, 0, rect.width, rect.height);
var text = new createjs.Text("Check Result", "30px Arial", "#FFFFFF");
container.addChild(rectShape);
container.addChild(text);
container.on("click", handleToggle);
stage.addChild(container);
stage.update();
function handleToggle(evt) {
field.visible = !field.visible;
if (field.visible) {
text.text="Hide Result";
} else {
text.text="Check Result";
}
stage.update();
}
stage.update();
}
</script>
</head>
<body onload="init()">
<H1>Poster ICDMFR 2017 Clickable task example</H1>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>
I appreciate any help on that.
Greetings
Gerald
http://www.odont.uio.no/english/people/adm/fac/gerald
I am trying to add a canvas to my index.html but it's not working at all. As in it doesn't show up. Here is my index.html and game.js file source. Please help, I've been trying to figure this out for the last hour or so and it still doesn't work. I've tested it in multiple browsers. I'm using brackets as my editor if that helps.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dogepet</title>
</head>
<body>
<center><p>Dogepet</p>
<script type="text/javascript" src="js/game.js"></script></center>
</body>
</html>
game.js
//Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 612;
canvas.height = 480;
document.body.appendChild(canvas);
//Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/dogepark.png";
var doge = {
speed: 10;
x: canvas.width/2;
y: 380;
};
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
};
var main = function () {
render();
};
setInterval(main,1);
Look into the Javascript console. In Firefox, I see this error message
[22:39:46.543] SyntaxError: missing } after property list
After replacing the semicolons ; with commas ,, everything works as expected.
See JSFiddle
I'm attempting to parse a tileset image (of type .png) into an array. I've got a test canvas that I'm using to draw it to first, then I am extracting the image info from it. When I run this code, it throws "Uncaught TypeError: Type error." I was able to log that this.mainTiles is empty. Any ideas? I don't know all the subtleties of Canvas yet, so I'm stuck. Thanks for the help! (Also, you can ignore the last line at the end, I was just using it to test--but I wanted to illustrate that it doesn't work).
function TileSet() {
this.tileSheets = [];
this.mainTiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var tileSheet = new Image();
try {
tileSheet.src = spriteSheetLoc;
}
catch(err) {
dMode.Log("Invalid TileSheet Src ( TileSet.setSpriteSheet() Failed ); ERR: " + err);
}
tempContext.drawImage(tileSheet, 0, 0);
var tilesX = tempContext.width / this.tileWidth;
var tilesY = tempContext.height / this.tileHeight;
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
this.mainTiles.push(tempContext.getImageData(j*this.tileWidth, i*this.tileHeight, this.tileWidth, this.tileHeight));
}
}
context.putImageData(this.mainTiles[0], 5, 5);
}
Edit: Here are how the canvases and such are defined:
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var Tiles = new TileSet;
//this is the line it gets stuck at
Tiles.addSpriteSheet("resources/tiles/tilea2.png");
Edit 2: After markE's answer, here's the latest update. Still feel as though I'm missing a fundamental property regarding .onload.
function TileSet() {
this.Tiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.tileCount = 4;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var tileSheet = new Image();
tileSheet.onload = function() {
tempCanvas.width = tileSheet.width;
tempCanvas.height = tileSheet.height;
tempContext.drawImage(tileSheet, 0, 0);
for (var t=0;t<this.tileCount;t++) {
this.Tiles[t]=tempContext.getImageData(t*this.tileWidth,t*32,this.tileWidth,tileSheet.height);
dMode.Log(this.Tiles);
}
context.putImageData(this.Tiles[this.Tiles.length-1],0,0);
dMode.Log(this.Tiles);
}
tileSheet.src = spriteSheetLoc;
}
Here's how to parse a spritesheet into an array of separate canvas imageData
I have some working code that does what you want to do.
I didn't have your "resources/tiles/tilea2.png" so I used my own "monstersArun.png" which is a 10 across spritesheet of 64x64 tiles.
You can modify this code to fit your spritesheet layout ( rows x columns and tile size).
Here is the code:
<!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: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tileCount=10;
var tiles=new Array();
var tileWidth;
var t;
var img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
tileWidth=img.width/tileCount;
ctx.drawImage(img,0,0);
for(var t=0;t<tileCount;t++){
tiles[t]=ctx.getImageData(t*tileWidth,0,tileWidth,img.height);
}
// just a test
// draw the last tiles[] into another canvas
var canvasTile=document.getElementById("canvasTile");
var ctxTile=canvasTile.getContext("2d");
canvasTile.width=tileWidth;
canvasTile.height=canvas.height;
ctxTile.putImageData(tiles[tiles.length-1],0,0);
}
img.src="monsterarun.png";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br/>
<canvas id="canvasTile" width=64 height=64></canvas>
</body>
</html>
[Edit--to include Juan Mendes good idea give help on coding problem]
Also, as I look at your code...here:
tileSheet.src = spriteSheetLoc;
This causes your image to load. That loading takes time to do, so javascript starts loading the image, but it also immediately goes on to your next line of code. As a result, your code below tries to use the image before it's available--no good!
So you should give javascript a chance to fully load your image before processing the rest of your code. You do this using the onload method of Image like this:
var tileSheet = new Image();
tileSheet.onload=function(){
// put ALL you code that depends on the image being fully loaded here
}
tileSheet.src = spriteSheetLoc;
Notice how you put tileSheet.src after the onload function. In reality, javascript executes tilesheet.src and then goes back to execute all the code in the onload block!
[Edit again -- complete code]
<!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: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
// create a new TileSet
var Tiles = new TileSet();
// parse a spritesheet into tiles
//Tiles.addSpriteSheet("resources/tiles/tilea2.png","anyName");
Tiles.addSpriteSheet("houseIcon.png","anyName");
function TileSet() {
this.Tiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.tileCount = 4;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var me=this; // me==this==TileSet
var tileSheet = new Image();
tileSheet.onload = function() {
// calculate the rows/cols in the spritesheet
// tilesX=rows, tilesY=cols
var tilesX = tileSheet.width / me.tileWidth;
var tilesY = tileSheet.height / me.tileHeight;
// set the spritesheet canvas to spritesheet.png size
// then draw spritesheet.png into the canvas
tempCanvas.width = tileSheet.width;
tempCanvas.height = tileSheet.height;
tempContext.drawImage(tileSheet, 0, 0);
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
me.Tiles.push(tempContext.getImageData(j*me.tileWidth, i*me.tileHeight, me.tileWidth, me.tileHeight));
}
}
// this is just a test
// display the last tile in a canvas
context.putImageData(me.Tiles[me.Tiles.length-1],0,0);
}
// load the spritesheet .png into tileSheet Image()
tileSheet.src = spriteSheetLoc;
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="tempCanvas" width=300 height=300></canvas><br/>
<canvas id="gameCanvas" width=300 height=300></canvas>
</body>
</html>
Try replacing tempContext.width and tempContext.height with tempCanvas.width and tempCanvas.height, respectively. I don't believe contexts have width/height.