Inconsistent anti-aliasing using emscripten/c++/wasm with different browsers/machines

41 views Asked by At

I'm using emscripten/c++ for a wasm module that draws some lines and some text using the emscripten canvas API. I'm calling the API with

void canvasClass::draw_lines(const vector< CanvasCoordinates> cc,const  Color color, const uint width){
ctx.call<void>("beginPath");
ctx_set("strokeStyle", color.str() );
ctx_set("lineJoin", "round");
ctx_set("lineWidth", width);
ctx.call<void>("moveTo", cc[0].getX(), cc[0].getY());
for(uint i=1; i<cc.size(); i++){
ctx.call<void>("lineTo", cc[i].getX(), cc[i].getY());
}
ctx.call<void>("stroke");
}

and

void canvasClass::draw_text(const CanvasCoordinates cc, const string text, const Color color){
ctx_set("fillStyle", color.str() );
ctx.call<void>("fillText", text, cc.getX(), cc.getY());
}

The problem I'm running into is that on some machines, the canvas displays beautifully and the text and lines are nice and smooth, and on others the anti-aliasing is clearly turned off and the text looks ugly and the lines are stairstep and jagged.

However I've gone to other sites on the ugly-rendering-machines and the diagonal lines look nice and smooth. So it is an incompatibility between my code and the machines, not just the machines' settings.

I've tried setting the css for the canvas to image-rendering: optimizeQuality. I've also tried within the c++ code setting the 2D context imageSmoothingEnabled to true,imageSmoothingQuality to high, lineJoin to round and lineCap to round. Also tried setting pixel ratio with

double dpr = emscripten_get_device_pixel_ratio();
ctx.call<void>("scale", dpr, dpr);

So far none of these changes has changed the rendering. Any suggestions would be helpful. I'm not sure what else to do at this point. Thanks in advance for your help!

0

There are 0 answers