HTML5 Tuval piksel boyutu, tuval boyutuna göre mi?

Question

Ben HTML5 tuval ile basit çizgiler çiziyorum:

context = $('canvas')[0].getContext('2d'); 
context.moveTo(150, 20); 
context.lineTo(300, 20); 
context.stroke(); 

benim tuval CSS değişiklikler olduğunda:

canvas { 
    width: 500px; 
    height: 500px; 
} 

genişlik ve yükseklik inme

canvas { 
    width: 1000px; 
    height: 1000px; 
} 

da iki katına! Ne verir?

Answer 1

CSS sadece görünür boyutunu belirler. Bunu oluşturan gerçek piksel sayısını ayarlamak için HTML'deki width ve height özniteliklerini değiştirin. HTML'de 100x100, CSS 200x200'de ise 2X tarafından görsel olarak ölçeklendirilir.

Answer 2

burada Yanıtlanmış: Resize HTML5 canvas to fit window