javascript - How to construct Raster and resize it? -

i'm using paper.js canvas drawings. i'm trying resize , position raster depending on canvas size code doesn't works properly.

var canvas = document.getelementbyid('canvas'); paper.setup(canvas); var pitch = new paper.raster('{{ static_url }}images/pitch.png');  var width = paper.view.size.width; var height = paper.view.size.height; console.log("screen dimensions: " + width + " " + height); var midpoint = [width/2,height/2]; var paddingleft = width/40; var scale = (height/pitch.height)*(90/100); console.log("scale: " + scale); pitch.scale(scale); console.log("pitch dimensions: " + pitch.height + " " + pitch.width); pitch.position = [midpoint[0] + paddingleft - (width-pitch.width*scale)/2 , midpoint[1]]; console.log("pitch position: " + pitch.position); 

when load page first time, logs:

screen dimensions: 472.5 340  scale: infinity  pitch dimensions: 0 0  pitch position: { x: nan, y: nan }  

but after refreshing page, works fine.

screen dimensions: 472.5 340  scale: 0.6120000000000001 pitch dimensions: 500 759 pitch position: { x: 244.0665, y: 170 } 

i think creating new var raster lags bit @ first time. have no idea how overcome problem.

if create raster url input, can use onload handler hold function. in case:

var canvas = document.getelementbyid('canvas'); paper.setup(canvas); var pitch = new paper.raster('{{ static_url }}images/pitch.png');  pitch.onload = function () {   var width = paper.view.size.width;    etc ... }