MoveToAsync is not working in methods

[aadurham]

Thanks for making the package public. I am a little puzzled with a strange behavior. I was wondering if this is a bug. Here is what I am trying to do. I need to draw many lines, so I delegate the drawing job to a static method:

public static async void Line(Context2D context, Line line)
{

    await context.BeginPathAsync();
    await context.MoveToAsync(line.startX, line.startY);
    await context.LineToAsync(line.endX, line.endY);
    await context.LineWidthAsync(line.thickness);

    // set line color
    await context.StrokeStyleAsync(line.color);
    await context.StrokeAsync();

}

I am trying to draw a V. When I call this the first time to draw the left arm of V, it works. The seocnd time I call it to draw the right arm, I use the same startX and startY coordinates, but the line does not start from the fork of V, instead it starts drawing at the top of the left arm.

Happy to put something on GitHub in case you need more info.

[stefanloerwald]

I just checked the code for moveTo and as far as I can see, it's implemented correctly. Can you share the code that calls this method? The issue might be there.

[aadurham]

thanks for the quick response, Stefan, here is a simple Blazor server app with the problem: https://github.com/aadurham/Blazor.Canvas.Demo

Notice that, the first line is black, the second is red, but it draws both in red.

[aadurham]

I have also added a screenshot of the issue

[stefanloerwald]

Looking at the coordinates that you pass to the method that draws the lines, it looks like the method is doing exactly what you ask it to do. Remember that in html canvases, the (0,0) coordinate is in the top left corner.

[aadurham]

I have added a few lines to write the coordinates to the console. Here is the console output: Line Color: black Move To: X = 10 Y = 150 Line To: X = 100 Y = 100 Line Color: red Move To: X = 10 Y = 150 Line To: X = 100 Y = 200

In the jpg file I uploaded, the second line does not start at (10,150). Instead it starts at (100,100), where the first line end. Also, as seen above, the color of the first line is black at time of drawing, but it turns to red at the end.

I have put these numbers into plain js here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path and added a jpg file of how it looks (I have also added the console output there). Here is my code in case you want to copy paste.

Here is the canvas element:

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

Here is the script:

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(10,150); ctx.lineTo(100,100); ctx.stroke(); ctx.moveTo(10,150); ctx.lineTo(100,200); ctx.stroke();

[aadurham]

the jpg files should be self explanatory. My V is supposed to be rotated 90 degrees clockwise.

[stefanloerwald]

You need to await.

Change public static async void Line(Context2D context, Line line) into public static async Task Line(Context2D context, Line line) and then await when drawing them: await DrawOnCanvas.Line(context, line1/2) . Not awaiting means the calls that you perform happen in any order. That means the change of color to red can happen before the stroke of the line that's supposed to be black.

[aadurham]

That solves the issue. I am glad it was me, not a bug! Thanks for your incredibly prompt response!