Use of mozImageSmoothingEnabled is deprecated

Viewed 1077

Another deprecated drama. I'm creating a Tetris game on javascript and I keep getting the following error when trying to draw the pieces on a canvas:

Use of mozImageSmoothingEnabled is deprecated. Please use the unprefixed imageSmoothingEnabled property instead.

But I have no idea how to use the unprefixed form! How can I make this work? I can see the canvas drawn but the pieces do not show up no matter what I do.

Here is my code on a file named view.js:

export default class View {
    constructor(element, width, height, rows, columns) {
        this.element = element;
        this.width = width;
        this.height = height;

        this.canvas = document.createElement('canvas');
        this.canvas.width = this.width;
        this.canvas.height = this.height;

        this.context = this.canvas.getContext('2d');

        this.blockWidth = this.width / columns;
        this.blockHeight = this.height / rows;

        this.element.appendChild(this.canvas);
    }

    renderPlayfield(playfield) {
        for (let y = 0; y < playfield.length; y++) {
            const line = playfield[y];

            for (let x = 0; x < line.height; x++) {
                if (block) {
                    this.context.fillStyle = 'white';
                    this.context.strokeStyle = 'black';
                    this.context.lineWidth = 2;

                    this.context.fillRect(x * this.blockWidth, y * this.blockHeight, this.blockWidth, this.blockHeight);
                }
            }
        }
    }
}

Then on my index.js I have:

import Game from './src/game.js';
import View from './src/view.js';

const root = document.querySelector('#root');

const game = new Game();
const view = new View(root, 480, 640, 20, 10);

window.game = game;
window.view = view;

view.renderPlayfield(game.playfield);
2 Answers

Am in the same situation while debugging with Firefox Developer Edition 89.0b10 - the warning pops up after the context for the canvas is requested:

        var ctx = self.ctx = can.getContext("2d");

Looks like a minor Firefox internal misconfiguration. Other than that, Firefox still is the best browser I know of.

Was your original ctx.mozImageSmoothingEnabled = true; working? If so, you just need to replace your original ctx.mozImageSmoothingEnabled = true; to ctx.imageSmoothingEnabled = true;. Here is an example.

Related