css轉換比例尺鼠標不能正常工作

Question

我正在嘗試在轉換div大小的畫布上繪製 但我無法從鼠標點完全繪製，鼠標和線之間存在一些實際繪圖發生的距離。

CSS

canvas { 
    border: 1px solid #ccc; 
    transform: scale(0.5) 
} 

JS

var el = document.getElementById('c'); 
var ctx = el.getContext('2d'); 
var isDrawing; 

el.onmousedown = function (e) { 
    isDrawing = true; 
    ctx.moveTo(e.clientX, e.clientY); 
}; 
el.onmousemove = function (e) { 
    if (isDrawing) { 
     ctx.lineTo(e.clientX, e.clientY); 
     ctx.stroke(); 
    } 
}; 

el.onmouseup = function() { 
    isDrawing = false; 
}; 

HTML

<canvas id="c" width="500" height="300"></canvas> 

Demo fiddle

Answer 1

嘗試使用鼠標懸停

el.onmouseover = function (e) { 
isDrawing = true; 
ctx.moveTo(e.clientX, e.clientY); 
}; 

讓我知道這是你想要

Answer 2

你需要在畫布的左側和頂部的鼠標位置減去乘以2的一切（或倒數無論你的規模是什麼）。

var rect = el.getBoundingClientRect(); 

// code here 
ctx.moveTo((e.clientX - rect.left) * 2, (e.clientY - rect.top) * 2); 

// code here 
ctx.lineTo((e.clientX - rect.left) * 2, (e.clientY - rect.top) * 2); 

這裏

更新的jsfiddle - >http://jsfiddle.net/Lqbeqjzb/7/

編輯：基於註釋更改了小提琴 - >https://jsfiddle.net/pb5ckhjm/4/