javascript - Bring object to the front in canvas -

i try use 1 <canvas> element

1 : clip image

2 : make 1 more rectangle

but how bring rectangle front ?

---

var canvas = document.getelementbyid('example'); var ctx = canvas.getcontext('2d'); var image = document.createelement('img'); image.onload = function () {     ctx.save();     ctx.beginpath();     ctx.moveto(29, 96);     ctx.lineto(157, 0);     ctx.lineto(288, 93);     ctx.closepath();     ctx.clip();     ctx.drawimage(image, 0, 0);     ctx.restore(); }; image.src = 'http://lorempixel.com/500/500/';    //  ctx.rect(20,20,150,100); ctx.fillstyle="red"; ctx.fill(); 

demo : http://jsfiddle.net/yw86d/

draw rectangle after image has been drawn

i modified code. try this,

var canvas = document.getelementbyid('example'); var ctx = canvas.getcontext('2d'); var image = document.createelement('img'); image.onload = function () {     ctx.save();     ctx.beginpath();     ctx.moveto(29, 96);     ctx.lineto(157, 0);     ctx.lineto(288, 93);     ctx.closepath();     ctx.clip();     ctx.drawimage(image, 0, 0);     ctx.restore();      ctx.beginpath();     ctx.rect(20,20,150,100);     ctx.fillstyle="red";     ctx.fill(); }; image.src = 'http://lorempixel.com/500/500/';