CODEWITHSUNDEEP
javascripthtml5-canvas
Stephen Witwick
Stephen Witwick

Reputation: 33

Issues scaling a js canvas pattern

I need a large rectangle filled with a checkerboard pattern and it must be able to scale. When I draw every square one-by-one, the final result is what I want, but it is a really inefficient way to draw once I have thousands of squares to create every frame. To counter this, I decided to create a pattern canvas and just fill the entire region with a simple pattern.

Here is an example of both methods: https://jsfiddle.net/Stephen_Witwick/zpunh195/150/

The black checkerboard pattern on the left is the one created with the pattern canvas and the red checkerboard is created by drawing each individual square.

This is the code that works but is slow:

//unitWidth and unitHeight are the dimensions of each square. Since the checkerboard uses squares, they are the same value
//boxWidthUnits and boxHeightUnits are the dimensions of the checkerboard by number of squares

for(let i = 0; i < boxWidthUnits/2; i++){
    for(let j = 0; j < boxHeightUnits/2; j++){
        ctx.fillRect(2*i*unitWidth,2*j*unitHeight,unitWidth,unitHeight);
        ctx.fillRect(2*(i+1/2)*unitWidth,2*(j+1/2)*unitHeight,unitWidth,unitHeight)
    }
}

Is there an way for me to get the result from the red checkerboard without it being so slow?

Upvotes: 1

Views: 99

Answers (1)

sney2002
sney2002

Reputation: 896

The problem is because most of the time the unitWidth/height is a fraction of a pixel but the pattern size must be a round number (because it is an image).

for example when n=15 the unit size is 10.375 but the patternCanvas size is round to 20x20. in this case each pattern is missing 0.75px * 10 patterns that fit in the square it is a total of 7.5px.

it is imperceptible to the eye but if you save the canvas image and use an image editor you can see that the pattern is almost always missing a portion to the right/bottom

Upvotes: 1

Related Questions