2

I'm trying to render some 2D shapes to a scaled up low resolution canvas. I'm using the canvas's 2d context functions "beginPath", "moveTo", "lineTo" and "fill" for this purpose. However I experienced that every shape I'm rendering will be rendered with antialiasing at the shape edges which I don't need and want in this case.

I tried to disable imagesmoothing by setting "context.imageSmoothingEnabled = false" and added "image-rendering: pixelated" to the style of the canvas but neither of these seem to help. Is there a way to render shapes without antialiasing or can't this feature be disabled. If not this would be pretty bad.

function drawOne(){
    var canvas = document.getElementById("canvas");
    canvas.style.imageRendering = "pixelated";
      
    var ctx = canvas.getContext("2d");
    ctx.imageSmoothingEnabled = false;
 
    ctx.beginPath();
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 10);
    ctx.lineTo(12, 30);
    ctx.closePath();
    ctx.fillStyle = "#FF0000";
    ctx.fill();
}

drawOne();
<canvas id="canvas" width="32" height="32" style="width:512px;height:512px;background-color:#000000;"></canvas>

Some additional info: I'm trying to realize a 3D affine texture mapper (like the good ol PSone) and therefore need the native rendering performance of the canvas context.

Marc
  • 41
  • 4
  • Unrelated to your specific question, but have you considered using SVG for what you're doing? Not sure if it's appropriate for your use case, but it seems to be given your example code. – Brad Feb 10 '19 at 15:52
  • I'm currently not sure about the performance of this approach as I was experimenting to realize a 3D affine texture mapping system (like on the PSone) which would render in realtime to a 428x240 pixel canvas in fullscreen mode. – Marc Feb 10 '19 at 16:16
  • You may also be interested in [this q/a](https://stackoverflow.com/questions/50625903/faster-bresenham-line-for-html-canvas) – Kaiido Feb 10 '19 at 23:35

1 Answers1

1

There's no standard feature for that, but I added a few lines to your code to simulate it: https://jsfiddle.net/pgnksbmu/

            for (var y = 0; y < 32; y++) {
                for (var x = 0; x < 32; x++) {
                if (ctx.isPointInPath(x + 0.5, y + 0.5)) {
                    ctx.fillRect(x, y, 1, 1);
                }
              }
            }
aptriangle
  • 1,395
  • 1
  • 9
  • 11
  • Well, as I am currently trying to realize a little 3D affine texture mapping system within the canvas this would drop render performance to a crumble. However thanks for the workaround. – Marc Feb 10 '19 at 16:14