CATATAN : Ini ada hubungannya dengan bagaimana elemen kanvas yang ada dirender saat diperbesar , bukan dengan bagaimana garis atau grafik dirender ke permukaan kanvas . Dengan kata lain, ini memiliki semuanya harus dilakukan dengan interpolasi dari elemen skala , dan tidak ada hubungannya dengan antialiasing grafis yang digambar di atas kanvas. Saya tidak peduli dengan bagaimana browser menggambar garis; Saya peduli tentang bagaimana browser merender elemen kanvas itu sendiri saat diskalakan.
Apakah ada properti kanvas atau setelan browser yang dapat saya ubah secara terprogram untuk menonaktifkan interpolasi saat menskalakan <canvas>elemen? Solusi lintas-browser sangat ideal tetapi tidak penting; Browser berbasis webkit adalah target utama saya. Performa sangat penting.
Pertanyaan ini paling mirip tetapi tidak cukup menggambarkan masalah. Untuk apa nilainya, saya telah mencoba image-rendering: -webkit-optimize-contrasttidak berhasil.
Aplikasi ini akan menjadi game bergaya "retro" 8-bit yang ditulis dalam HTML5 + JS untuk memperjelas apa yang saya butuhkan.
Sebagai ilustrasi, berikut adalah sebuah contoh. ( versi langsung )
Misalkan saya memiliki kanvas 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... yang memiliki css yang membuat elemen 5 kali lebih besar (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */Saya menggambar 'X' sederhana di kanvas seperti ini:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});Gambar di sebelah kiri adalah gambar yang dibuat oleh Chromium (14.0). Gambar di sebelah kanan adalah yang saya inginkan (digambar dengan tangan untuk tujuan ilustrasi).
