HTML5 Canvas Resizable Polygon

Question

I need a diagonal polygon color fill that resizes based on screen width / height. The green background fill here: http://rhiwifi.co/bus is a prototype which uses a rotated DIV. That DIV is 200% of the screen, so it stretches past the bounds of the mobile interface and doesn't fill in the bottom of the screen correctly.

How can I draw a resizable polygon that is diagonal on the top, and rectangular on the bottom? Or is there an easier way?

Answer 1

I'd just store the o-ordinates as proportion values, rather than as absolute pixels.

That is to say, I'd use numbers in the range [0..1] to define a point. Then you just multiply this by your canvas dimensions to get the pixel dimensions.

Eg you want to draw a rect that occupies the top-left 1/4 of the canvas, define it thusly: "0,0,0.5,0.5" - you can then split into an array based on commas. You can then multiply each element in the array by the canvas size to give you the final coordinates.

The 2d OpenGL viewport, for instance uses normalized co-ords, where 0,0 is the center of the screen, -1,-1 the top left, 1,1 is the bottom right. This way, openGL just multiplies out by window size to get pixel values.