How can I make a rectangle be on top of all other rectangles in javascript canvas? -


i have rectangle includes menu. need rectangle on top of other objects in game. bear in mind, no css, javascript canvas programming. how can that?

if need code rectangle:

ctx.fillrect(0,0,width,100); 

that need know guess.

the canvas has no in-built layering. have multiple options:

  • add second canvas html document, , use css positioning place above other canvas object. draw rectangle on upper canvas , other content on lower canvas. transparent pixels on upper canvas show content of canvas below.

  • redraw rectangle after other drawing operation.

  • use drawing loop erase , redraw whole scene window.requestanimationframe (any sufficiently complex game ends there anyway sooner or later). draw objects in order want them overlap, means draw said rectangle last.


Comments