Neden bu tuval üzerine oluşturduğum dikdörtgenler doğru yere konulmuyor?

Question

Tuval üzerine dikdörtgenler tıklayıp oluşturabileceğiniz basit bir sayfa oluşturmaya çalışıyorum. Kullanıcının fare tıklamalarını girdi olarak alır ve ardından tıklamanın x ve y öğelerinden bir dikdörtgen oluşturur. Bununla birlikte, dikdörtgeni bir miktar yana kapar ve neden emin değilim.

Fiddle: https://jsfiddle.net/2717s53h/

HTML

<canvas id="cnv"></canvas> 

CSS

#cnv{ 
    width:99vw; 
    height:98vh; 
    background-color:#faefbd; 
} 

JAVASCRIPT

$(function() { 
    var canvas = $('#cnv'); 
    var canvObj = document.getElementById('cnv'); 
    var ctx = canvObj.getContext('2d'); 

    var point1 = {}; 
    var point2 = {}; 

    canvas.click(function (e) { 
     console.log(e); 

     var x = e.pageX; 
     var y = e.pageY; 

     console.log(x); 
     console.log(y); 

     if (Object.keys(point1).length == 0) 
     { 
      point1.x = x; 
      point1.y = y; 
     } 
     else if (Object.keys(point2).length == 0) 
     { 
      point2.x = x; 
      point2.y = y; 

      console.log(point1); 
      console.log(point2); 
      var width = point2.x - point1.x; 
      var height = point2.y - point1.y; 
      width = width < 0 ? width * -1 : width; 
      height = height < 0 ? height * -1 : height; 
      ctx.fillRect(x, y, 10, 10); 

      point1 = {}; 
      point2 = {}; 
     } 

    }); 
}); 

Answer 1

CSS yüksekliği/genişliği ile HTML kanvas öznitelikleri yüksekliği ve genişliği arasında bir fark var: ilki, tuvalin sayfada kapladığı alanı tanımlar; İkincisi işleme yüzeyini tanımlar. concreto, aşağıdaki tuval olduğunu varsayalım: tuvalin CSS width: 100%; height: 100%; için ayarlanmış bir 1200x800 boyutta bir görüntü alanına sahip

<canvas height="400" width="600"></canvas> 

ve, sonra tuval olarak görüntülenecek iki kat daha büyük ve bulanık uzatıp hem yükseklik hem de genişlik (kemanınızda olduğu gibi; bu dikdörtgenler 10 pikselden daha büyüktür). Sonuç olarak, sayfa koordinatları, tuvalin koordinatları ile uyumlu değildir. Eğer genişlik/yükseklik özellikleri belirlenemez çünkü specification gereğince

, senin Fiddle en tuval render yüzey 300x150 geçerli:

genişliği 300 varsayılan özellik ve yükseklik 150

varsayılan olarak bağlıyor

your fiddle'un biraz 'düzeltilmiş' sürümüne bakın. Sonuç olarak benim tavsiyem (HTML-kanvasında uzman olmayan) tavsiyem olacaktır ve her zaman 2 niteliğini belirtin ve farklı oluşturma yüzeyi ve ekran boyutları ile karışıklık yapmayın (kesinlikle vw gibi göreceli olmayanlar) vh,%, em, ...) eğer tahmin edilemez sonuçlar istemiyorsanız; Bazı SO kullanıcıları a solution'u arıyor olsa da.