JavaScriptを使用してキャンバス上の画像のウィンドウレベルを変更する方法

Question

キャンバス上に画像を表示するか、キャンバスに描画する画像があります。私はそれらを上手く描画することができますが、私はキャンバス上にマウスの上にドラッグしてイメージのウィンドウレベルを変更したい。私は多くの外部JavaScript APIを見てきましたが、それらはかなり巨大で、私はこの目的のために使用したくありません。ここ

は基本的に、これは私のコードは、私は基本的なJSやjQueryを使って何かを必要と

// Grab the Canvas and Drawing Context 
var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 



// Create an image element 
var img = document.createElement('IMG'); 

// When the image is loaded, draw it 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 

// Specify the src to load the image 
img.src = "http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample5_l.jpg"; 

をどのように見えるかであるキャンバス上

を画像を描画された私のJSFIDDLEです。サンプルコードを使用して正しい方向に私を指すことができれば、素晴らしいことでしょう。

ありがとうございます。

Answer 1

JavaScriptを使用したい場合は、のようなものを試してください：絶対位置を使用して、左と上の値を変更します。

<script> 
var c = document.getElementById("drawingboard"); 
var ctx = c.getContext("2d"); 
var mouseDown = 0; 
document.body.ontouchstart = function() { 
mouseDown+=1; 
} 
document.body.ontouchend = function() { 
mouseDown-=1; 
} 
function draw(event){ 
ctx.color='gold'; 
ctx.fillStyle = "lime"; 
ctx.drawImage(img,event.clientX,event.clientY);} 
</script>