public
Created

Draw on the html5 canvas using text as your medium.

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<canvas id='canvas'></canvas>
<span id='info'>Click and drag to draw!<span>
 
<!--
Drawing with text:
- Click and drag to draw.
- Double click to clear.
 
Ported from java at http://www.generative-gestaltung.de
 
by Tim Holman - @twholman
 
-->
script.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
// Drawing with text. Ported from Generative Design book - http://www.generative-gestaltung.de - Original licence: http://www.apache.org/licenses/LICENSE-2.0
 
// Application variables
var position = {x: 0, y: window.innerHeight/2};
var counter = 0;
var minFontSize = 3;
var angleDistortion = 0;
var letters = "There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'";
 
// Drawing variables
var canvas;
var context;
var mouse = {x: 0, y: 0, down: false}
 
function init() {
canvas = document.getElementById( 'canvas' );
context = canvas.getContext( '2d' );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mouseout', mouseUp, false);
canvas.addEventListener('dblclick', doubleClick, false);
window.onresize = function(event) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
}
 
function mouseMove ( event ){
mouse.x = event.pageX;
mouse.y = event.pageY;
draw();
}
 
function draw() {
if ( mouse.down ) {
var d = distance( position, mouse );
var fontSize = minFontSize + d/2;
var letter = letters[counter];
var stepSize = textWidth( letter, fontSize );
if (d > stepSize) {
var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x);
context.font = fontSize + "px Georgia";
context.save();
context.translate( position.x, position.y);
context.rotate( angle );
context.fillText(letter,0,0);
context.restore();
 
counter++;
if (counter > letters.length-1) {
counter = 0;
}
//console.log (position.x + Math.cos( angle ) * stepSize)
position.x = position.x + Math.cos(angle) * stepSize;
position.y = position.y + Math.sin(angle) * stepSize;
 
}
}
}
 
function distance( pt, pt2 ){
var xs = 0;
var ys = 0;
xs = pt2.x - pt.x;
xs = xs * xs;
ys = pt2.y - pt.y;
ys = ys * ys;
return Math.sqrt( xs + ys );
}
 
function mouseDown( event ){
mouse.down = true;
position.x = event.pageX;
position.y = event.pageY;
document.getElementById('info').style.display = 'none';
}
 
function mouseUp( event ){
mouse.down = false;
}
 
function doubleClick( event ) {
canvas.width = canvas.width;
}
 
function textWidth( string, size ) {
context.font = size + "px Georgia";
if ( context.fillText ) {
return context.measureText( string ).width;
} else if ( context.mozDrawText) {
return context.mozMeasureText( string );
}
};
 
init();
style.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
@import "compass";
html, body {
width: 100%;
height: 100%;
margin: 0px;
overlfow: hidden;
&:hover {
span {
display: none;
}
}
}
 
canvas {
cursor: crosshair;
}
 
span {
font-family: 'Georgia', cursive;
font-size: 40px;
position: fixed;
top: 50%;
left: 50%;
color: #000;
margin-top: -40px;
margin-left: -200px;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.