5 kyu

Canvas Fun #3: Draw Screen Unlock Pattern

52myjinxin2015
Description
Loading description...
Puzzles
Graphics
View
AllIssues1Questions1SuggestionsShow Resolved
  • Please sign in or sign up to leave a comment.
  • thykka Avatar

    I don't like this. My perfectly valid solution is getting rejected, because of floating point errors. My math and drawing procedures are solid, but because the test cases expect bit-to-bit accuracy (which can be impossible to achieve cross-browser/cross-OS with Canvas), my solution isn't not going through.

    For example, take a look at my drawing vs. test case here: https://i.imgur.com/q0YkNSp.png You might not even see the difference, yet there are sub-pixel inaccuracies, and I'm absolutely sure it's not my code that's causing those. It's inherent to Canvas API implementations.

    • thykka Avatar

      Check out this page: https://browserleaks.com/canvas

      As you can see, it will give you a uniqueness percentage, of how your browser draws a set of drawing instructions. The uniqueness is likely quite high too. What this means, is that your browser produces a different image from other browsers, so by definition, expecting pixel-perfect, bit-to-bit accuracy in this Kata is misguided.

    • thykka Avatar

      The way I see it, there are two ways around this problem:

      1. Instead of checking for bit-to-bit accuracy, calculate the difference between test and actual images, and check if it's below a certain threshold. Problem with this is that it might allow some actual bugs go through, or it might not let a valid, but complex image go through

      2. Instead of using pre-rendered data for the test-cases, generate the test data within the tests, so that differences in canvas rendering will also be present in the test images.

    • dramforever Avatar

      Sorry for not actually taking a look at the kata in detail, however browser compatibility problems are very unlikely here. All tests are run on the server in a pretty well-defined environment.

      For details the kata author would need to chime in...

    • thykka Avatar

      This comment has been hidden.

    • livxy Avatar

      Please kindly mark your content as having spoiler.

  • ZED.CWT Avatar
    • What do you mean by replace the gray hollow circle with a "yellow" hollow circle

    A. initially draw a yellow hallow? B. draw a gray hollow then draw a yellow one in the same position? (i.e. cover the gray hollow using a yellow one)

    • How do you draw lines and yellow hollows?

    A. draw all lines first? B. draw all hollows first? C. draw the first hollow, the first line, the second hollow?

    • How do you draw lines?

    A. moveTo the first point, lineTo the second, lineTo the third..., and stroke only once? B. moveTo the first, lineTo the second, stroke. moveTo the second, lineTo the third, stroke...?

    • And it seems weird that in all cases, all hollows except the first touched hollow are brighter

    In case seq=[1,2,3], the expected color of the top pixel of all actived hollows are #AFAF11, #D2D217, #D2D217 They should be the same right?

    • myjinxin2015 Avatar

      I am on my bed, so I cant test the situation of different order of drawing. Do you mean they will be different?

    • myjinxin2015 Avatar

      for [123], I just using "yellow" as  the color of circle

    • myjinxin2015 Avatar

      1.B 2and3.draw yellow circle if need, then draw a singe lline

    • ZED.CWT Avatar

      Do you mean they will be different?

      IDK, but it is canvas, floating error can lead to hell anything. (Which is why we can have Canvas Fingerprinting)

      for [123], I just using "yellow" as the color of circle

      Then why the color of three hollows in the result are not identical. (currently it is 1 != 2 and 2 == 3)

    • ZED.CWT Avatar
      Question marked resolved by ZED.CWT 7 years ago
    • dasfrank Avatar

      Hello, can we get a definitive answer to this please?

      How do you draw lines and yellow hollows? A. draw all lines first? B. draw all hollows first? C. draw the first hollow, the first line, the second hollow?

      How do you draw lines? A. moveTo the first point, lineTo the second, lineTo the third..., and stroke only once? B. moveTo the first, lineTo the second, stroke. moveTo the second, lineTo the third, stroke...?

      This answer is really vague.

      2and3.draw yellow circle if need, then draw a singe lline

    • myjinxin2015 Avatar

      the answer was written in the description already ;-)

    • dasfrank Avatar

      This comment has been hidden.

    • myjinxin2015 Avatar

      It seems that you are not drawing the image according to order strictly. Perhaps I can write a conpare function to calculate the similarity with my reference image. Please wait.

    • myjinxin2015 Avatar

      This comment has been hidden.