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:transparent;margin:0;z-index:10000;position:fixed;top:0;}
img {width:100%;position:fixed;top:0;}

JavaScript

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

console.log(nW,nH)
canvas.height( cs.height) ;

ctx = canvas[0].getContext('2d');
ctx.strokeStyle = '#ff0'
ctx.fillStyle =('rgb(255,0,0)')
ctx.fillRect(10,10,150,20);
ctx.strokeRect(10,10,150,20);