Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 4fb17b07a0
Fetching contributors…

Cannot retrieve contributors at this time

54 lines (47 sloc) 1.54 kb
<!DOCTYPE html>
<html>
<head>
<title>Canvas Rotated textFill</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="test" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
ctx.fillRect(0, 0, 700, 470);
ctx.fillStyle = "white";
for (var i = 7; i < 13; i += 0.5) {
var fontSpec = "" + i + "px monospace";
ctx.font = fontSpec;
ctx.fillText(fontSpec, 20, i * 35 - 220);
}
for (var i = 7; i < 13; i += 0.5) {
var fontSpec = "" + i + "px sans-serif";
ctx.font = fontSpec;
ctx.fillText(fontSpec, 200, i * 35 - 220);
}
for (var i = 7; i < 13; i += 0.5) {
var fontSpec = "" + i + "px serif";
ctx.font = fontSpec;
ctx.fillText(fontSpec, 370, i * 35 - 220);
}
for (var i = 7; i < 13; i += 0.5) {
var fontSpec = "" + i + "pt monospace";
ctx.font = fontSpec;
ctx.fillText(fontSpec, 20, i * 35);
}
for (var i = 7; i < 13; i += 0.5) {
var fontSpec = "" + i + "pt sans-serif";
ctx.font = fontSpec;
ctx.fillText(fontSpec, 200, i * 35);
}
for (var i = 7; i < 13; i += 0.5) {
var fontSpec = "" + i + "pt serif";
ctx.font = fontSpec;
ctx.fillText(fontSpec, 370, i * 35);
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.