Create static png from svg without Anti-aliasing, with or without canvas

Question

What I want

I want to take a vector SVG image and create a raster png from it without Anti-aliasing. The svg will be dynamically generated based on user input (text, bold, font-family). png is preferred, but other raster formats can be accepted.

What I am trying

var svg = '<svg><g><text>Hello World</text></g></svg>';
var img = document.createElement('img');
img.setAttribute('src','data:image/svg+xml;base64,' + btoa(svg_static_data) );
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    static_image = canvas.toDataURL('image/png');
};

The svg here is very simple simply for demonstration. Here, I turn the svg into a canvas element, and turn the canvas element into an image. When that resulted in Anti-aliasing, the only configuration I found that might help was imageSmoothingEnabled, however I am still getting Anti-aliasing, likely because that configuration is for elements drawn with canvas itself. I have also tried placing that configuration above drawImage, but no luck.

What I need

A function to turn a dynamic non-animated SVG, that may contain many elements and attributes, including curved text, into a raster image that is at least mostly identical.

Answer 1

imageSmoothingEnabled do only apply to images, but only when the image source is drawn scaled.

However, the problem in this case is that the SVG image is anti-aliased internally when rasterized before your onload handler kicks in, so when you draw it to canvas it is already anti-aliased - there is nothing you can do to turn this off except by manually parsing and rendering the SVG (which is not a small project).