garciadelcastillo/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Styling

Sketchpad accepts CSS-like style declarations via the Style model. This includes strokes, fills, fonts and alignments.

  
## index.html
<!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>

## sketch.js
// 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);

## styles.css
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;
}
	<!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>
	// 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);
	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;
	}