canvasPan

by ihope

HTML

<div style=" width:80%;margin: auto;"><canvas id="canvas" ></canvas>
<img id="image" src="//192.168.1.22:8080/static/ngEditor/36-pause.png"  />
</div>

CSS

canvas {
    width:100%;
    background:black;
    margin:0;
    /*
    z-index:10000;
    position:fixed;
    top:0;*/
}
img {
    width:100%;
    /*display:none*/
}

JavaScript

canvas = $('#canvas');
image = $('#image');
nW = image[0].naturalWidth;
nH = image[0].naturalHeight;
cs = getComputedStyle(image[0]);

console.log(nW,nH)
canvas.width( parseInt(cs.width.split('p')[0])) ;

canvas.height( parseInt(cs.height.split('p')[0])) ;
z = canvas.height /nH
ctx = canvas[0].getContext('2d');