How to write text over a drawn canvas?

Question

i have drawn over a ribbon with the code:

var canvas = document.getElementById('draw-ribbon'); ctx = canvas.getContext("2d"); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 0); ctx.lineTo(260, 75); ctx.lineTo(300, 150); ctx.lineTo(0, 150); ctx.closePath(); ctx.fill();

got this:

enter image description here

after this i have tried filltext() but didn't work i want to achieve this:

enter image description here

developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas — Derek 朕會功夫
– Derek 朕會功夫, Commented Mar 27, 2014 at 2:42

drserge · Accepted Answer · 2014-03-27 02:54:05Z

May be not working because the text color is also red

var canvas = document.getElementById('myCanvas'); ctx = canvas.getContext("2d"); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 0); ctx.lineTo(260, 75); ctx.lineTo(300, 150); ctx.lineTo(0, 150); ctx.closePath(); ctx.fill(); ctx.font="30px Verdana"; ctx.fillStyle = 'white'; ctx.fillText("Text",50,80);

http://jsfiddle.net/dvdyakonov/zFg5q/

Collectives™ on Stack Overflow

How to write text over a drawn canvas?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related