Sketchpad accepts CSS-like style declarations via the Style
model. This includes strokes, fills, fonts and alignments.
Last active
August 29, 2015 14:11
-
-
Save garciadelcastillo/9fef91208baf5e2f5814 to your computer and use it in GitHub Desktop.
Sketchpad.js - Styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<html> | |
<head> | |
<link rel="stylesheet" type="text/css" href="styles.css"> | |
</head> | |
<body> | |
<div id="sketchpadDiv"> | |
<canvas id="sketchpadCanvas"></canvas> | |
</div> | |
</body> | |
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
<script type="text/javascript" src="http://www.garciadelcastillo.es/sketchpad/sketchpad.js"></script> | |
<script type="text/javascript" src="sketch.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Create new instance of Sketchpad in target Canvas | |
var pad = new Sketchpad('sketchpadCanvas'); | |
// Draw a circle with current default Style | |
var C1 = new pad.Node(128, 200), | |
C1c = pad.Circle.centerRadius(C1, 100); | |
// Create a Style object | |
var beige = new pad.Style({ | |
stroke: 'rgb(224, 228, 204)', | |
strokeWidth: 3.0, | |
fill: 'rgba(224, 228, 204, 0.5)' | |
}); | |
// From now on, draw elements with new Style | |
pad.currentStyle(beige); | |
// These new elements will use the new default style | |
var C2 = new pad.Node(256, 200), | |
C2c = pad.Circle.centerRadius(C2, 100); | |
// More Styles | |
var aqua = new pad.Style({ | |
stroke: 'rgb(167, 219, 216)', | |
strokeWidth: 3.0, | |
fill: 'rgba(167, 219, 216, 0.5)' | |
}), | |
cyan = new pad.Style({ | |
stroke: 'rgb(105, 210, 231)', | |
strokeWidth: 3.0, | |
fill: 'rgba(105, 210, 231, 0.5)' | |
}); | |
// Still using 'reddish' for these | |
var C3 = new pad.Node(384, 200), | |
C3c = pad.Circle.centerRadius(C3, 100), | |
C4 = new pad.Node(512, 200), | |
C4c = pad.Circle.centerRadius(C4, 100); | |
// Styles can be applied indivually to elements | |
aqua.applyTo(C3, C3c); | |
cyan.applyTo(C4, C4c); | |
// Font styling can also be defined, see docs for options | |
var arial12black = new pad.Style({ | |
stroke: 'black', | |
fontFamily: 'Courier', | |
fontSize: '9pt', | |
fontStyle: 'bold', | |
textHAlign: 'left', | |
textVAlign: 'top' | |
}); | |
// Use new Style | |
pad.currentStyle(arial12black); | |
var title = new pad.Tag("Topleft aligned bold 9pt Courier", 10, 10); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
padding: 0; | |
} | |
#sketchpadDiv { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
border: 1px solid #000; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
#sketchpadCanvas { | |
position: absolute; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment