make image-rendering: pixelated work in firefox

set default scale back to 4x
This commit is contained in:
Colin McMillen 2019-09-24 21:21:23 -04:00
parent 2e54945438
commit 1506b7a3eb
2 changed files with 7 additions and 2 deletions

View File

@ -15,6 +15,8 @@
margin-bottom: 8px; margin-bottom: 8px;
padding: 1px; padding: 1px;
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
} }
</style> </style>
</head> </head>

View File

@ -157,6 +157,10 @@ class Graphics {
constructor(canvas) { constructor(canvas) {
this.canvas_ = canvas; this.canvas_ = canvas;
this.ctx_ = canvas.getContext('2d'); this.ctx_ = canvas.getContext('2d');
this.ctx_.imageSmoothingEnabled = false;
this.ctx_.mozImageSmoothingEnabled = false;
this.ctx_.webkitImageSmoothingEnabled = false;
this.ctx_.msImageSmoothingEnabled = false;
} }
get width() { get width() {
@ -185,7 +189,6 @@ class Graphics {
// TODO: replace with custom sprite-based text rendering. // TODO: replace with custom sprite-based text rendering.
text(string, x, y, size, color) { text(string, x, y, size, color) {
this.ctx_.imageSmoothingEnabled = false;
this.ctx_.fillStyle = color; this.ctx_.fillStyle = color;
this.ctx_.font = '' + size + 'px monospace'; this.ctx_.font = '' + size + 'px monospace';
this.ctx_.fillText(string, x, y); this.ctx_.fillText(string, x, y);
@ -492,7 +495,7 @@ function init() {
document.getElementById('3x').onclick = () => setCanvasScale(3); document.getElementById('3x').onclick = () => setCanvasScale(3);
document.getElementById('4x').onclick = () => setCanvasScale(4); document.getElementById('4x').onclick = () => setCanvasScale(4);
document.getElementById('5x').onclick = () => setCanvasScale(5); document.getElementById('5x').onclick = () => setCanvasScale(5);
setCanvasScale(3); setCanvasScale(4);
window.requestAnimationFrame(loop(world, gfx)); window.requestAnimationFrame(loop(world, gfx));
debug('initialized!'); debug('initialized!');
} }