Text on Canvas

Sandbox for playing with max-width settings etc.

by Rynne Cowham

HTML

<p>
I cannot take credit -- this was forked from someone else's fiddle.
</p>
<br>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

JavaScript

var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';
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("My Awesome Org",50,80,180); // last number is max-width