lukechilds
/
node-canvas
mirror of https://github.com/lukechilds/node-canvas.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #776 from LinusU/example-cleanup 

Cleanup examples
v1.x
Linus Unnebäck 9 years ago
parent
8e2978b3a8 dbe6a5d147
commit
a297c79a1f
22 changed files with 758 additions and 924 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      examples/clock.js
  2. 39
      examples/crop.js
  3. 51
      examples/font.js
  4. 54
      examples/globalAlpha.js
  5. 44
      examples/gradients.js
  6. 28
      examples/grayscale-image.js
  7. 59
      examples/image-src.js
  8. 136
      examples/kraken.js
  9. 124
      examples/live-clock.js
  10. 51
      examples/multi-page-pdf.js
  11. 36
      examples/pango-glyphs.js
  12. 67
      examples/pdf-images.js
  13. 116
      examples/ray.js
  14. 45
      examples/resize.js
  15. 6
      examples/rhill-voronoi-core-min.js
  16. 33
      examples/small-pdf.js
  17. 33
      examples/small-svg.js
  18. 61
      examples/spark.js
  19. 40
      examples/state.js
  20. 66
      examples/text.js
  21. 234
      examples/voronoi.js
  22. 5
      package.json

176
examples/clock.js
View File

@ -1,113 +1,113 @@
var fs = require('fs')
/** var path = require('path')
* Module dependencies. var Canvas = require('..')
*/
var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, ctx = canvas.getContext('2d')
, fs = require('fs');
function getX (angle) { function getX (angle) {
return -Math.sin(angle + Math.PI); return -Math.sin(angle + Math.PI)
} }
function getY (angle) { function getY (angle) {
return Math.cos(angle + Math.PI); return Math.cos(angle + Math.PI)
} }
function clock (ctx) { function clock (ctx) {
var now = new Date(); var x, y, i
ctx.clearRect(0,0,320,320); var now = new Date()
ctx.save(); ctx.clearRect(0, 0, 320, 320)
ctx.translate(160,160);
ctx.beginPath(); ctx.save()
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2'; ctx.translate(160, 160)
ctx.fillStyle = '#eeeeee'; ctx.beginPath()
ctx.arc(0,0,142,0,Math.PI*2,true); ctx.lineWidth = 14
ctx.stroke(); ctx.strokeStyle = '#325FA2'
ctx.fill(); ctx.fillStyle = '#eeeeee'
ctx.arc(0, 0, 142, 0, Math.PI * 2, true)
ctx.strokeStyle = '#000000'; ctx.stroke()
ctx.fill()
// Hour marks // Hour marks
ctx.lineWidth = 8; ctx.lineWidth = 8
for (var i=0;i<12;i++){ ctx.strokeStyle = '#000000'
var x = getX(Math.PI/6*i); for (i = 0; i < 12; i++) {
var y = getY(Math.PI/6*i); x = getX(Math.PI / 6 * i)
ctx.beginPath(); y = getY(Math.PI / 6 * i)
ctx.moveTo(x*100,y*100); ctx.beginPath()
ctx.lineTo(x*125,y*125); ctx.moveTo(x * 100, y * 100)
ctx.stroke(); ctx.lineTo(x * 125, y * 125)
ctx.stroke()
} }
// Minute marks // Minute marks
ctx.lineWidth = 5; ctx.lineWidth = 5
ctx.strokeStyle = '#000000'
for (i = 0; i < 60; i++) { for (i = 0; i < 60; i++) {
if (i%5!=0) { if (i % 5 !== 0) {
var x = getX(Math.PI/30*i); x = getX(Math.PI / 30 * i)
var y = getY(Math.PI/30*i); y = getY(Math.PI / 30 * i)
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(x*117,y*117); ctx.moveTo(x * 117, y * 117)
ctx.lineTo(x*125,y*125); ctx.lineTo(x * 125, y * 125)
ctx.stroke(); ctx.stroke()
} }
} }
var sec = now.getSeconds(); var sec = now.getSeconds()
var min = now.getMinutes(); var min = now.getMinutes()
var hr = now.getHours(); var hr = now.getHours() % 12
hr = hr>=12 ? hr-12 : hr;
ctx.fillStyle = "black"; ctx.fillStyle = 'black'
// write Hours // Write hours
var x = getX(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec); x = getX(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
var y = getY(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec); y = getY(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
ctx.lineWidth = 14; ctx.lineWidth = 14
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(x*-20,y*-20); ctx.moveTo(x * -20, y * -20)
ctx.lineTo(x*80,y*80); ctx.lineTo(x * 80, y * 80)
ctx.stroke(); ctx.stroke()
// write Minutes // Write minutes
var x = getX((Math.PI/30)*min + (Math.PI/1800)*sec); x = getX((Math.PI / 30) * min + (Math.PI / 1800) * sec)
var y = getY((Math.PI/30)*min + (Math.PI/1800)*sec); y = getY((Math.PI / 30) * min + (Math.PI / 1800) * sec)
ctx.lineWidth = 10; ctx.lineWidth = 10
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(x*-28,y*-28); ctx.moveTo(x * -28, y * -28)
ctx.lineTo(x*112,y*112); ctx.lineTo(x * 112, y * 112)
ctx.stroke(); ctx.stroke()
// Write seconds // Write seconds
var x = getX(sec * Math.PI/30); x = getX(sec * Math.PI / 30)
var y = getY(sec * Math.PI/30); y = getY(sec * Math.PI / 30)
ctx.strokeStyle = "#D40000"; ctx.strokeStyle = '#D40000'
ctx.fillStyle = "#D40000"; ctx.fillStyle = '#D40000'
ctx.lineWidth = 6; ctx.lineWidth = 6
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(x*-30,y*-30); ctx.moveTo(x * -30, y * -30)
ctx.lineTo(x*83,y*83); ctx.lineTo(x * 83, y * 83)
ctx.stroke(); ctx.stroke()
ctx.beginPath(); ctx.beginPath()
ctx.arc(0,0,10,0,Math.PI*2,true); ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
ctx.fill(); ctx.fill()
ctx.beginPath(); ctx.beginPath()
ctx.arc(x*95,y*95,10,0,Math.PI*2,true); ctx.arc(x * 95, y * 95, 10, 0, Math.PI * 2, true)
ctx.stroke(); ctx.stroke()
ctx.fillStyle = "#555"; ctx.fillStyle = '#555'
ctx.arc(0,0,3,0,Math.PI*2,true); ctx.arc(0, 0, 3, 0, Math.PI * 2, true)
ctx.fill(); ctx.fill()
ctx.restore(); ctx.restore()
} }
clock(ctx); module.exports = clock
var out = fs.createWriteStream(__dirname + '/clock.png') if (require.main === module) {
, stream = canvas.createPNGStream(); var canvas = new Canvas(320, 320)
var ctx = canvas.getContext('2d')
stream.on('data', function(chunk){ clock(ctx)
out.write(chunk);
}); canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'clock.png')))
}

39
examples/crop.js
View File

@ -1,36 +1,29 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var Image = Canvas.Image
* Module dependencies. var img = new Image()
*/
var Canvas = require('../lib/canvas')
, Image = Canvas.Image
, fs = require('fs');
var img = new Image;
img.onerror = function (err) { img.onerror = function (err) {
throw err; throw err
}; }
img.onload = function () { img.onload = function () {
var w = img.width / 2 var w = img.width / 2
, h = img.height / 2 var h = img.height / 2
, canvas = new Canvas(w, h) var canvas = new Canvas(w, h)
, ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);
var out = fs.createWriteStream(__dirname + '/crop.jpg'); ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h)
var out = fs.createWriteStream(path.join(__dirname, 'crop.png'))
var stream = canvas.createJPEGStream({ var stream = canvas.createJPEGStream({
bufsize: 2048, bufsize: 2048,
quality: 80 quality: 80
}); })
stream.pipe(out);
};
img.src = __dirname + '/images/squid.png';
stream.pipe(out)
}
img.src = path.join(__dirname, 'images', 'squid.png')

51
examples/font.js
View File

@ -1,50 +1,39 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var Font = Canvas.Font
* Module dependencies.
*/
var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, Font = Canvas.Font
, ctx = canvas.getContext('2d')
, fs = require('fs')
, path = require("path");
if (!Font) { if (!Font) {
throw new Error('Need to compile with font support'); throw new Error('Need to compile with font support')
} }
function fontFile (name) { function fontFile (name) {
return path.join(__dirname, '/pfennigFont/', name); return path.join(__dirname, '/pfennigFont/', name)
} }
var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf')); var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf'))
pfennigFont.addFace(fontFile('PfennigBold.ttf'), 'bold'); pfennigFont.addFace(fontFile('PfennigBold.ttf'), 'bold')
pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic'); pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic')
pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic'); pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic')
var canvas = new Canvas(320, 320) var canvas = new Canvas(320, 320)
var ctx = canvas.getContext('2d') var ctx = canvas.getContext('2d')
// Tell the ctx to use the font. // Tell the ctx to use the font.
ctx.addFont(pfennigFont); ctx.addFont(pfennigFont)
ctx.font = 'normal normal 50px Helvetica';
ctx.fillText('Quo Vaids?', 0, 70); ctx.font = 'normal normal 50px Helvetica'
ctx.font = 'bold 50px pfennigFont'; ctx.fillText('Quo Vaids?', 0, 70)
ctx.fillText('Quo Vaids?', 0, 140);
ctx.font = 'italic 50px pfennigFont'; ctx.font = 'bold 50px pfennigFont'
ctx.fillText('Quo Vaids?', 0, 210); ctx.fillText('Quo Vaids?', 0, 140)
ctx.font = 'bold italic 50px pfennigFont'; ctx.font = 'italic 50px pfennigFont'
ctx.fillText('Quo Vaids?', 0, 280); ctx.fillText('Quo Vaids?', 0, 210)
var out = fs.createWriteStream(__dirname + '/font.png'); ctx.font = 'bold italic 50px pfennigFont'
var stream = canvas.createPNGStream(); ctx.fillText('Quo Vaids?', 0, 280)
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'font.png')))
out.write(chunk);
});

54
examples/globalAlpha.js
View File

@ -1,36 +1,32 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(150, 150)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
ctx.fillStyle = '#FD0'
var Canvas = require('../lib/canvas') ctx.fillRect(0, 0, 75, 75)
, canvas = new Canvas(150, 150)
, ctx = canvas.getContext('2d') ctx.fillStyle = '#6C0'
, fs = require('fs'); ctx.fillRect(75, 0, 75, 75)
ctx.fillStyle = '#FD0'; ctx.fillStyle = '#09F)'
ctx.fillRect(0,0,75,75); ctx.fillRect(0, 75, 75, 75)
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75); ctx.fillStyle = '#F30'
ctx.fillStyle = '#09F)'; ctx.fillRect(75, 75, 150, 150)
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30'; ctx.fillStyle = '#FFF'
ctx.fillRect(75,75,150,150);
ctx.fillStyle = '#FFF';
// set transparency value // set transparency value
ctx.globalAlpha = 0.2; ctx.globalAlpha = 0.2
// Draw semi transparent circles // Draw semi transparent circles
for (i=0;i<7;i++){ for (var i = 0; i < 7; i++) {
ctx.beginPath(); ctx.beginPath()
ctx.arc(75,75,10+10*i,0,Math.PI*2,true); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true)
ctx.fill(); ctx.fill()
} }
var out = fs.createWriteStream(__dirname + '/globalAlpha.png') canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'globalAlpha.png')))
, stream = canvas.createPNGStream();
stream.on('data', function(chunk){
out.write(chunk);
});

44
examples/gradients.js
View File

@ -1,35 +1,27 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(320, 320)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, ctx = canvas.getContext('2d')
, fs = require('fs');
// Create gradients // Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150); var lingrad = ctx.createLinearGradient(0, 0, 0, 150)
lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(0, '#00ABEB')
lingrad.addColorStop(0.5, '#fff'); lingrad.addColorStop(0.5, '#fff')
lingrad.addColorStop(0.5, '#26C000'); lingrad.addColorStop(0.5, '#26C000')
lingrad.addColorStop(1, '#fff'); lingrad.addColorStop(1, '#fff')
var lingrad2 = ctx.createLinearGradient(0,50,0,95); var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95)
lingrad2.addColorStop(0.5, '#000'); lingrad2.addColorStop(0.5, '#000')
lingrad2.addColorStop(1, 'rgba(0,0,0,0)'); lingrad2.addColorStop(1, 'rgba(0,0,0,0)')
// assign gradients to fill and stroke styles // assign gradients to fill and stroke styles
ctx.fillStyle = lingrad; ctx.fillStyle = lingrad
ctx.strokeStyle = lingrad2; ctx.strokeStyle = lingrad2
// draw shapes // draw shapes
ctx.fillRect(10,10,130,130); ctx.fillRect(10, 10, 130, 130)
ctx.strokeRect(50,50,50,50); ctx.strokeRect(50, 50, 50, 50)
var out = fs.createWriteStream(__dirname + '/gradients.png')
, stream = canvas.createPNGStream();
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'gradients.png')))
out.write(chunk);
});

28
examples/grayscale-image.js
View File

@ -1,22 +1,14 @@
/** var fs = require('fs')
* Passing grayscale image through canvas. Image should remain a gray square. var path = require('path')
* If image is distorted with lines, then grayscale images are being distorted. var Canvas = require('..')
*/
var Canvas = require('../lib/canvas')
, Image = Canvas.Image
, canvas = new Canvas(288, 288)
, ctx = canvas.getContext('2d')
, fs = require('fs');
var grayScaleImage = fs.readFileSync(__dirname + '/images/grayscaleImage.jpg'); var Image = Canvas.Image
img = new Image; var canvas = new Canvas(288, 288)
img.src = grayScaleImage; var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0); var img = new Image()
img.src = fs.readFileSync(path.join(__dirname, 'images', 'grayscaleImage.jpg'))
var out = fs.createWriteStream(__dirname + '/passedThroughGrayscale.jpg') ctx.drawImage(img, 0, 0)
, stream = canvas.createJPEGStream();
stream.on('data', function(chunk){ canvas.createJPEGStream().pipe(fs.createWriteStream(path.join(__dirname, 'passedThroughGrayscale.jpg')))
out.write(chunk);
});

59
examples/image-src.js
View File

@ -1,45 +1,36 @@
var fs = require('fs')
var path = require(path)
var Canvas = require('..')
/** var Image = Canvas.Image
* Module dependencies. var canvas = new Canvas(200, 200)
*/ var ctx = canvas.getContext('2d')
var Canvas = require('../lib/canvas') ctx.fillRect(0, 0, 150, 150)
, Image = Canvas.Image ctx.save()
, canvas = new Canvas(200, 200)
, ctx = canvas.getContext('2d')
, fs = require('fs');
ctx.fillRect(0,0,150,150);
ctx.save();
ctx.fillStyle = '#09F' ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120); ctx.fillRect(15, 15, 120, 120)
ctx.save(); ctx.save()
ctx.fillStyle = '#FFF' ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5; ctx.globalAlpha = 0.5
ctx.fillRect(30,30,90,90); ctx.fillRect(30, 30, 90, 90)
ctx.restore();
ctx.fillRect(45,45,60,60);
ctx.restore(); ctx.restore()
ctx.fillRect(60,60,30,30); ctx.fillRect(45, 45, 60, 60)
var img = new Image; ctx.restore()
img.src = canvas.toBuffer(); ctx.fillRect(60, 60, 30, 30)
ctx.drawImage(img, 0, 0, 50, 50);
ctx.drawImage(img, 50, 0, 50, 50);
ctx.drawImage(img, 100, 0, 50, 50);
var squid = fs.readFileSync(__dirname + '/images/squid.png'); var img = new Image()
img = new Image; img.src = canvas.toBuffer()
img.src = squid; ctx.drawImage(img, 0, 0, 50, 50)
ctx.drawImage(img, 30, 50, img.width / 4, img.height / 4); ctx.drawImage(img, 50, 0, 50, 50)
ctx.drawImage(img, 100, 0, 50, 50)
var out = fs.createWriteStream(__dirname + '/image-src.png') img = new Image()
, stream = canvas.createPNGStream(); img.src = fs.readFileSync(path.join(__dirname, 'images', 'squid.png'))
ctx.drawImage(img, 30, 50, img.width / 4, img.height / 4)
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'image-src.png')))
out.write(chunk);
});

136
examples/kraken.js
View File

@ -1,98 +1,104 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var Image = Canvas.Image
* Module dependencies. var canvas = new Canvas(400, 267)
*/ var ctx = canvas.getContext('2d')
var Canvas = require('../lib/canvas') var img = new Image()
, Image = Canvas.Image
, canvas = new Canvas(400, 267)
, ctx = canvas.getContext('2d')
, fs = require('fs');
var img = new Image;
img.onload = function () { img.onload = function () {
ctx.drawImage(img,0,0); ctx.drawImage(img, 0, 0)
}; }
img.src = __dirname + '/images/squid.png';
img.src = path.join(__dirname, 'images', 'squid.png')
var sigma = 10; // radius var sigma = 10 // radius
var kernel, kernelSize, kernelSum; var kernel, kernelSize, kernelSum
buildKernel();
function buildKernel () { function buildKernel () {
var ss = sigma * sigma; var i, j, g
var factor = 2 * Math.PI * ss; var ss = sigma * sigma
kernel = []; var factor = 2 * Math.PI * ss
kernel.push([]);
var i = 0, j; kernel = [[]]
i = 0
do { do {
var g = Math.exp(-(i * i) / (2 * ss)) / factor; g = Math.exp(-(i * i) / (2 * ss)) / factor
if (g < 1e-3) break; if (g < 1e-3) break
kernel[0].push(g); kernel[0].push(g)
++i; ++i
} while (i < 7); } while (i < 7)
kernelSize = i;
kernelSize = i
for (j = 1; j < kernelSize; ++j) { for (j = 1; j < kernelSize; ++j) {
kernel.push([]); kernel.push([])
for (i = 0; i < kernelSize; ++i) { for (i = 0; i < kernelSize; ++i) {
var g = Math.exp(-(i * i + j * j) / (2 * ss)) / factor; g = Math.exp(-(i * i + j * j) / (2 * ss)) / factor
kernel[j].push(g); kernel[j].push(g)
} }
} }
kernelSum = 0;
kernelSum = 0
for (j = 1 - kernelSize; j < kernelSize; ++j) { for (j = 1 - kernelSize; j < kernelSize; ++j) {
for (i = 1 - kernelSize; i < kernelSize; ++i) { for (i = 1 - kernelSize; i < kernelSize; ++i) {
kernelSum += kernel[Math.abs(j)][Math.abs(i)]; kernelSum += kernel[Math.abs(j)][Math.abs(i)]
} }
} }
} }
function blurTest () { function blurTest () {
console.log('... running'); var x, y, i, j
var r, g, b, a
console.log('... running')
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
var width = imgData.width, height = imgData.height; var data = imgData.data
var data = imgData.data; var width = imgData.width
var height = imgData.height
var len = data.length; var startTime = (new Date()).getTime()
var startTime = (new Date()).getTime();
for (y = 0; y < height; ++y) {
for (x = 0; x < width; ++x) {
r = 0
g = 0
b = 0
a = 0
for (var y = 0; y < height; ++y) {
for (var x = 0; x < width; ++x) {
var r = 0, g = 0, b = 0, a = 0;
for (j = 1 - kernelSize; j < kernelSize; ++j) { for (j = 1 - kernelSize; j < kernelSize; ++j) {
if (y + j < 0 || y + j >= height) continue; if (y + j < 0 || y + j >= height) continue
for (i = 1 - kernelSize; i < kernelSize; ++i) { for (i = 1 - kernelSize; i < kernelSize; ++i) {
if (x + i < 0 || x + i >= width) continue; if (x + i < 0 || x + i >= width) continue
r += data[4 * ((y + j) * width + (x + i)) + 0] * kernel[Math.abs(j)][Math.abs(i)];
g += data[4 * ((y + j) * width + (x + i)) + 1] * kernel[Math.abs(j)][Math.abs(i)]; r += data[4 * ((y + j) * width + (x + i)) + 0] * kernel[Math.abs(j)][Math.abs(i)]
b += data[4 * ((y + j) * width + (x + i)) + 2] * kernel[Math.abs(j)][Math.abs(i)]; g += data[4 * ((y + j) * width + (x + i)) + 1] * kernel[Math.abs(j)][Math.abs(i)]
a += data[4 * ((y + j) * width + (x + i)) + 3] * kernel[Math.abs(j)][Math.abs(i)]; b += data[4 * ((y + j) * width + (x + i)) + 2] * kernel[Math.abs(j)][Math.abs(i)]
} a += data[4 * ((y + j) * width + (x + i)) + 3] * kernel[Math.abs(j)][Math.abs(i)]
} }
data[4 * (y * width + x) + 0] = r / kernelSum;
data[4 * (y * width + x) + 1] = g / kernelSum;
data[4 * (y * width + x) + 2] = b / kernelSum;
data[4 * (y * width + x) + 3] = a / kernelSum;
} }
data[4 * (y * width + x) + 0] = r / kernelSum
data[4 * (y * width + x) + 1] = g / kernelSum
data[4 * (y * width + x) + 2] = b / kernelSum
data[4 * (y * width + x) + 3] = a / kernelSum
} }
var finishTime = Date.now() - startTime;
for (var i = 0; i < data.length; i++) {
imgData.data[i] = data[i];
} }
//imgData.data = data;
ctx.putImageData(imgData, 0, 0); var finishTime = Date.now() - startTime
console.log('... finished in %dms', finishTime); for (i = 0; i < data.length; i++) {
imgData.data[i] = data[i]
} }
blurTest(); ctx.putImageData(imgData, 0, 0)
console.log('... finished in %dms', finishTime)
}
var out = fs.createWriteStream(__dirname + '/kraken.png') buildKernel()
, stream = canvas.createPNGStream(); blurTest()
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'kraken.png')))
out.write(chunk);
});

124
examples/live-clock.js
View File

@ -1,113 +1,19 @@
var http = require('http')
var Canvas = require('..')
/** var clock = require('./clock')
* Module dependencies.
*/
var Canvas = require('../lib/canvas') var canvas = new Canvas(320, 320)
, canvas = new Canvas(320, 320) var ctx = canvas.getContext('2d')
, ctx = canvas.getContext('2d')
, http = require('http');
function getX(angle) {
return -Math.sin(angle + Math.PI);
}
function getY(angle) {
return Math.cos(angle + Math.PI);
}
function clock(ctx){
var now = new Date();
ctx.clearRect(0,0,320,320);
ctx.save();
ctx.translate(160,160);
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.fillStyle = '#eeeeee';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();
ctx.strokeStyle = '#000000';
// Hour marks
ctx.lineWidth = 8;
for (var i=0;i<12;i++){
var x = getX(Math.PI/6*i);
var y = getY(Math.PI/6*i);
ctx.beginPath();
ctx.moveTo(x*100,y*100);
ctx.lineTo(x*125,y*125);
ctx.stroke();
}
// Minute marks
ctx.lineWidth = 5;
for (i=0;i<60;i++){
if (i%5!=0) {
var x = getX(Math.PI/30*i);
var y = getY(Math.PI/30*i);
ctx.beginPath();
ctx.moveTo(x*117,y*117);
ctx.lineTo(x*125,y*125);
ctx.stroke();
}
}
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;
ctx.fillStyle = "black";
// write Hours
var x = getX(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
var y = getY(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(x*-20,y*-20);
ctx.lineTo(x*80,y*80);
ctx.stroke();
// write Minutes
var x = getX((Math.PI/30)*min + (Math.PI/1800)*sec);
var y = getY((Math.PI/30)*min + (Math.PI/1800)*sec);
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(x*-28,y*-28);
ctx.lineTo(x*112,y*112);
ctx.stroke();
// Write seconds
var x = getX(sec * Math.PI/30);
var y = getY(sec * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(x*-30,y*-30);
ctx.lineTo(x*83,y*83);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(x*95,y*95,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "#555";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
}
http.createServer(function (req, res) { http.createServer(function (req, res) {
clock(ctx); clock(ctx)
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('' res.writeHead(200, { 'Content-Type': 'text/html' })
+ '<meta http-equiv="refresh" content="1;" />' res.end(
+ '<img src="' + canvas.toDataURL() + '" />'); '<meta http-equiv="refresh" content="1;" />' +
}).listen(3000); '<img src="' + canvas.toDataURL() + '" />'
console.log('Server started on port 3000'); )
}).listen(3000, function () {
console.log('Server started on port 3000')
})

51
examples/multi-page-pdf.js
View File

@ -1,39 +1,42 @@
var fs = require('fs')
var Canvas = require('..')
var Canvas = require('../') var canvas = new Canvas(500, 500, 'pdf')
, canvas = new Canvas(500, 500, 'pdf') var ctx = canvas.getContext('2d')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var x, y; var x, y
function reset () { function reset () {
x = 50; x = 50
y = 80; y = 80
} }
function h1 (str) { function h1 (str) {
ctx.font = '22px Helvetica'; ctx.font = '22px Helvetica'
ctx.fillText(str, x, y); ctx.fillText(str, x, y)
} }
function p (str) { function p (str) {
ctx.font = '10px Arial'; ctx.font = '10px Arial'
ctx.fillText(str, x, y += 20); ctx.fillText(str, x, (y += 20))
} }
reset(); reset()
h1('PDF demo'); h1('PDF demo')
p('Multi-page PDF demonstration'); p('Multi-page PDF demonstration')
ctx.addPage(); ctx.addPage()
reset(); reset()
h1('Page #2'); h1('Page #2')
p('This is the second page'); p('This is the second page')
ctx.addPage(); ctx.addPage()
reset(); reset()
h1('Page #3'); h1('Page #3')
p('This is the third page'); p('This is the third page')
fs.writeFile('out.pdf', canvas.toBuffer()); fs.writeFile('out.pdf', canvas.toBuffer(), function (err) {
console.log('created out.pdf'); if (err) throw err
console.log('created out.pdf')
})

36
examples/pango-glyphs.js
View File

@ -1,30 +1,22 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(400, 100)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas') ctx.globalAlpha = 1
, canvas = new Canvas(400, 100) ctx.font = 'normal 16px Impact'
, ctx = canvas.getContext('2d')
, fs = require('fs');
ctx.globalAlpha = 1; ctx.textBaseline = 'top'
ctx.font = 'normal 16px Impact';
ctx.textBaseline = 'top';
// Note this demo depends node-canvas being installed with pango support, // Note this demo depends node-canvas being installed with pango support,
// and your system having installed fonts supporting the glyphs. // and your system having installed fonts supporting the glyphs.
ctx.fillStyle = '#000'; ctx.fillStyle = '#000'
ctx.fillText("English: Some text in Impact.", 10, 10); ctx.fillText('English: Some text in Impact.', 10, 10)
ctx.fillText("Japanese: 図書館の中では、静かにする。", 10, 30); ctx.fillText('Japanese: 図書館の中では、静かにする。', 10, 30)
ctx.fillText("Arabic: اللغة العربية هي أكثر اللغات تحدثا ضمن", 10, 50); ctx.fillText('Arabic: اللغة العربية هي أكثر اللغات تحدثا ضمن', 10, 50)
ctx.fillText("Korean: 모타는사라미 못하는 사람이", 10, 70); ctx.fillText('Korean: 모타는사라미 못하는 사람이', 10, 70)
var out = fs.createWriteStream(__dirname + '/pango-glyphs.png')
, stream = canvas.createPNGStream();
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'pango-glyphs.png')))
out.write(chunk);
});

67
examples/pdf-images.js
View File

@ -1,47 +1,50 @@
var fs = require('fs')
var Canvas = require('..')
var Canvas = require('../') var Image = Canvas.Image
, Image = Canvas.Image var canvas = new Canvas(500, 500, 'pdf')
, canvas = new Canvas(500, 500, 'pdf') var ctx = canvas.getContext('2d')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var x, y; var x, y
function reset () { function reset () {
x = 50; x = 50
y = 80; y = 80
} }
function h1 (str) { function h1 (str) {
ctx.font = '22px Helvetica'; ctx.font = '22px Helvetica'
ctx.fillText(str, x, y); ctx.fillText(str, x, y)
} }
function p (str) { function p (str) {
ctx.font = '10px Arial'; ctx.font = '10px Arial'
ctx.fillText(str, x, y += 20); ctx.fillText(str, x, (y += 20))
} }
function img (src) { function img (src) {
var img = new Image; var img = new Image()
img.src = src; img.src = src
ctx.drawImage(img, x, y += 20); ctx.drawImage(img, x, (y += 20))
y += img.height; y += img.height
} }
reset(); reset()
h1('PDF image demo'); h1('PDF image demo')
p('This is an image embedded in a PDF'); p('This is an image embedded in a PDF')
img('examples/images/squid.png'); img('examples/images/squid.png')
p('Figure 1.0 - Some squid thing'); p('Figure 1.0 - Some squid thing')
ctx.addPage(); ctx.addPage()
reset(); reset()
h1('Lime cat'); h1('Lime cat')
p('This is a pretty sweet cat'); p('This is a pretty sweet cat')
img('examples/images/lime-cat.jpg'); img('examples/images/lime-cat.jpg')
p('Figure 1.1 - Lime cat is awesome'); p('Figure 1.1 - Lime cat is awesome')
ctx.addPage(); ctx.addPage()
fs.writeFile('out.pdf', canvas.toBuffer()); fs.writeFile('out.pdf', canvas.toBuffer(), function (err) {
console.log('created out.pdf'); if (err) throw err
console.log('created out.pdf')
})

116
examples/ray.js
View File

@ -1,85 +1,85 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(243 * 4, 243)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas')
, canvas = new Canvas(243 * 4, 243)
, ctx = canvas.getContext('2d')
, fs = require('fs');
function render (level) { function render (level) {
ctx.fillStyle = getPointColour(122,122); ctx.fillStyle = getPointColour(122, 122)
ctx.fillRect(0,0,240,240); ctx.fillRect(0, 0, 240, 240)
renderLevel(level,81,0); renderLevel(level, 81, 0)
} }
function renderLevel (minimumLevel, level, y) { function renderLevel (minimumLevel, level, y) {
for (var x=0; x < 243 / level; ++x) { var x
drawBlock(x,y,level);
for (x = 0; x < 243 / level; ++x) {
drawBlock(x, y, level)
} }
for (var x=0; x < 243 / level; x+=3){ for (x = 0; x < 243 / level; x += 3) {
drawBlock(x,y+1,level); drawBlock(x, y + 1, level)
drawBlock(x+2,y+1,level); drawBlock(x + 2, y + 1, level)
} }
for (var x=0; x < 243 / level; ++x){ for (x = 0; x < 243 / level; ++x) {
drawBlock(x,y+2,level); drawBlock(x, y + 2, level)
} }
if ((y += 3) >= 243 / level) { if ((y += 3) >= 243 / level) {
y=0; y = 0
level /= 3; level /= 3
} }
if (level >= minimumLevel) { if (level >= minimumLevel) {
renderLevel(minimumLevel, level, y); renderLevel(minimumLevel, level, y)
} }
} }
function drawBlock (x, y, level) { function drawBlock (x, y, level) {
ctx.fillStyle = getPointColour( ctx.fillStyle = getPointColour(
x * level + (level-1) / 2 x * level + (level - 1) / 2,
, y * level + (level-1) / 2); y * level + (level - 1) / 2
)
ctx.fillRect( ctx.fillRect(
x * level x * level,
, y * level y * level,
, level level,
, level level
); )
} }
function getPointColour (x, y) { function getPointColour (x, y) {
x= x / 121.5 - 1; x = x / 121.5 - 1
y= -y / 121.5 + 1; y = -y / 121.5 + 1
var x2y2 = x * x + y * y;
var x2y2 = x * x + y * y
if (x2y2 > 1) { if (x2y2 > 1) {
return '#000'; return '#000'
} else {
var root = Math.sqrt(1 - x2y2);
var x3d = x * 0.7071067812 + root / 2 - y / 2;
var y3d = x * 0.7071067812 - root / 2 + y / 2;
var z3d = 0.7071067812 * root + 0.7071067812 * y;
var brightness= -x / 2 + root * 0.7071067812 + y / 2;
if (brightness < 0) brightness = 0;
return ''
+ 'rgb(' + Math.round(brightness * 127.5 * (1 - y3d))
+ ',' + Math.round(brightness * 127.5 * (x3d + 1))
+ ',' + Math.round(brightness * 127.5 * (z3d + 1))
+ ')'
;
} }
var root = Math.sqrt(1 - x2y2)
var x3d = x * 0.7071067812 + root / 2 - y / 2
var y3d = x * 0.7071067812 - root / 2 + y / 2
var z3d = 0.7071067812 * root + 0.7071067812 * y
var brightness = -x / 2 + root * 0.7071067812 + y / 2
if (brightness < 0) brightness = 0
var r = Math.round(brightness * 127.5 * (1 - y3d))
var g = Math.round(brightness * 127.5 * (x3d + 1))
var b = Math.round(brightness * 127.5 * (z3d + 1))
return 'rgb(' + r + ', ' + g + ', ' + b + ')'
} }
var start = new Date; var start = new Date()
render(10);
ctx.translate(243,0); render(10)
render(6); ctx.translate(243, 0)
ctx.translate(243,0); render(6)
render(3); ctx.translate(243, 0)
ctx.translate(243,0); render(3)
render(1); ctx.translate(243, 0)
console.log('Rendered in %s seconds', (new Date - start) / 1000); render(1)
console.log('Rendered in %s seconds', (new Date() - start) / 1000)
canvas.toBuffer(function(err, buf){ canvas.pngStream().pipe(fs.createWriteStream(path.join(__dirname, 'ray.png')))
if (err) throw err;
fs.writeFile(__dirname + '/ray.png', buf);
});

45
examples/resize.js
View File

@ -1,34 +1,31 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var Image = Canvas.Image
* Module dependencies.
*/
var Canvas = require('../lib/canvas') var img = new Image()
, Image = Canvas.Image var start = new Date()
, fs = require('fs');
var img = new Image
, start = new Date;
img.onerror = function (err) { img.onerror = function (err) {
throw err; throw err
}; }
img.onload = function () { img.onload = function () {
var width = 100; var width = 100
var height = 100; var height = 100
var canvas = new Canvas(width, height); var canvas = new Canvas(width, height)
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d')
var out = fs.createWriteStream(path.join(__dirname, 'resize.png'))
ctx.imageSmoothingEnabled = true; ctx.imageSmoothingEnabled = true
ctx.drawImage(img, 0, 0, width, height); ctx.drawImage(img, 0, 0, width, height)
canvas.toBuffer(function(err, buf){ canvas.pngStream().pipe(out)
fs.writeFile(__dirname + '/resize.png', buf, function(){
console.log('Resized and saved in %dms', new Date - start);
});
});
};
img.src = process.argv[2] || __dirname + '/images/squid.png'; out.on('finish', function () {
console.log('Resized and saved in %dms', new Date() - start)
})
}
img.src = (process.argv[2] || path.join(__dirname, 'images', 'squid.png'))

6
examples/rhill-voronoi-core-min.js
View File

File diff suppressed because one or more lines are too long

33
examples/small-pdf.js
View File

@ -1,22 +1,25 @@
var fs = require('fs')
var Canvas = require('..')
var Canvas = require('../') var canvas = new Canvas(400, 200, 'pdf')
, canvas = new Canvas(400, 200, 'pdf') var ctx = canvas.getContext('2d')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var y = 80 var y = 80
, x = 50; var x = 50
ctx.font = '22px Helvetica'; ctx.font = '22px Helvetica'
ctx.fillText('node-canvas pdf', x, y); ctx.fillText('node-canvas pdf', x, y)
ctx.font = '10px Arial'; ctx.font = '10px Arial'
ctx.fillText('Just a quick example of PDFs with node-canvas', x, y += 20); ctx.fillText('Just a quick example of PDFs with node-canvas', x, (y += 20))
ctx.globalAlpha = .5; ctx.globalAlpha = 0.5
ctx.fillRect(x, y += 20, 10, 10); ctx.fillRect(x, (y += 20), 10, 10)
ctx.fillRect(x += 20, y, 10, 10); ctx.fillRect((x += 20), y, 10, 10)
ctx.fillRect(x += 20, y, 10, 10); ctx.fillRect((x += 20), y, 10, 10)
fs.writeFile('out.pdf', canvas.toBuffer()); fs.writeFile('out.pdf', canvas.toBuffer(), function (err) {
console.log('created out.pdf'); if (err) throw err
console.log('created out.pdf')
})

33
examples/small-svg.js
View File

@ -1,22 +1,25 @@
var fs = require('fs')
var Canvas = require('..')
var Canvas = require('../') var canvas = new Canvas(400, 200, 'svg')
, canvas = new Canvas(400, 200, 'svg') var ctx = canvas.getContext('2d')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var y = 80 var y = 80
, x = 50; var x = 50
ctx.font = '22px Helvetica'; ctx.font = '22px Helvetica'
ctx.fillText('node-canvas SVG', x, y); ctx.fillText('node-canvas SVG', x, y)
ctx.font = '10px Arial'; ctx.font = '10px Arial'
ctx.fillText('Just a quick example of SVGs with node-canvas', x, y += 20); ctx.fillText('Just a quick example of SVGs with node-canvas', x, (y += 20))
ctx.globalAlpha = .5; ctx.globalAlpha = 0.5
ctx.fillRect(x, y += 20, 10, 10); ctx.fillRect(x, (y += 20), 10, 10)
ctx.fillRect(x += 20, y, 10, 10); ctx.fillRect((x += 20), y, 10, 10)
ctx.fillRect(x += 20, y, 10, 10); ctx.fillRect((x += 20), y, 10, 10)
fs.writeFile('out.svg', canvas.toBuffer()); fs.writeFile('out.svg', canvas.toBuffer(), function (err) {
console.log('created out.svg'); if (err) throw err
console.log('created out.svg')
})

61
examples/spark.js
View File

@ -1,46 +1,33 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(40, 15)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas')
, canvas = new Canvas(40, 15)
, ctx = canvas.getContext('2d')
, fs = require('fs');
Object.defineProperty(Array.prototype, 'max', {
get: function(){
var max = 0;
for (var i = 0, len = this.length; i < len; ++i) {
var n = this[i];
if (n > max) max = n;
}
return max;
}
});
function spark (ctx, data) { function spark (ctx, data) {
var len = data.length var len = data.length
, pad = 1 var pad = 1
, width = ctx.canvas.width var width = ctx.canvas.width
, height = ctx.canvas.height var height = ctx.canvas.height
, barWidth = width / len var barWidth = width / len
, max = data.max; var max = Math.max.apply(null, data)
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.strokeStyle = 'red'; ctx.fillStyle = 'rgba(0,0,255,0.5)'
ctx.lineWidth = 1; ctx.strokeStyle = 'red'
ctx.lineWidth = 1
data.forEach(function (n, i) { data.forEach(function (n, i) {
var x = i * barWidth + pad var x = i * barWidth + pad
, y = height * (n / max) var y = height * (n / max)
ctx.lineTo(x, height - y);
ctx.fillRect(x, height, barWidth - pad, -y); ctx.lineTo(x, height - y)
}); ctx.fillRect(x, height, barWidth - pad, -y)
ctx.stroke(); })
ctx.stroke()
} }
spark(ctx, [1,2,4,5,10,4,2,5,4,3,3,2]); spark(ctx, [1, 2, 4, 5, 10, 4, 2, 5, 4, 3, 3, 2])
canvas.toBuffer(function(err, buf){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'spark.png')))
if (err) throw err;
fs.writeFile(__dirname + '/spark.png', buf);
});

40
examples/state.js
View File

@ -1,33 +1,25 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(150, 150)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas') ctx.fillRect(0, 0, 150, 150) // Draw a rectangle with default settings
, canvas = new Canvas(150, 150) ctx.save() // Save the default state
, ctx = canvas.getContext('2d')
, fs = require('fs');
ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings
ctx.save(); // Save the default state
ctx.fillStyle = '#09F' // Make changes to the settings ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings ctx.fillRect(15, 15, 120, 120) // Draw a rectangle with new settings
ctx.save(); // Save the current state ctx.save() // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5; ctx.globalAlpha = 0.5
ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings ctx.fillRect(30, 30, 90, 90) // Draw a rectangle with new settings
ctx.restore(); // Restore previous state
ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings
ctx.restore(); // Restore original state ctx.restore() // Restore previous state
ctx.fillRect(60,60,30,30); // Draw a rectangle with restored settings ctx.fillRect(45, 45, 60, 60) // Draw a rectangle with restored settings
var out = fs.createWriteStream(__dirname + '/state.png') ctx.restore() // Restore original state
, stream = canvas.createPNGStream(); ctx.fillRect(60, 60, 30, 30) // Draw a rectangle with restored settings
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'state.png')))
out.write(chunk);
});

66
examples/text.js
View File

@ -1,50 +1,44 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/** var canvas = new Canvas(200, 200)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas') ctx.globalAlpha = 0.2
, canvas = new Canvas(200, 200)
, ctx = canvas.getContext('2d')
, fs = require('fs');
ctx.globalAlpha = .2; ctx.strokeRect(0, 0, 200, 200)
ctx.lineTo(0, 100)
ctx.lineTo(200, 100)
ctx.stroke()
ctx.strokeRect(0,0,200,200); ctx.beginPath()
ctx.lineTo(0,100); ctx.lineTo(100, 0)
ctx.lineTo(200,100); ctx.lineTo(100, 200)
ctx.stroke(); ctx.stroke()
ctx.beginPath(); ctx.globalAlpha = 1
ctx.lineTo(100,0); ctx.font = 'normal 40px Impact, serif'
ctx.lineTo(100,200);
ctx.stroke();
ctx.globalAlpha = 1; ctx.rotate(0.5)
ctx.font = 'normal 40px Impact, serif'; ctx.translate(20, -40)
ctx.rotate(.5); ctx.lineWidth = 1
ctx.translate(20,-40); ctx.strokeStyle = '#ddd'
ctx.strokeText('Wahoo', 50, 100)
ctx.lineWidth = 1; ctx.fillStyle = '#000'
ctx.strokeStyle = '#ddd'; ctx.fillText('Wahoo', 49, 99)
ctx.strokeText("Wahoo", 50, 100);
ctx.fillStyle = '#000'; var m = ctx.measureText('Wahoo')
ctx.fillText("Wahoo", 49, 99);
var m = ctx.measureText("Wahoo"); ctx.strokeStyle = '#f00'
ctx.strokeStyle = '#f00'; ctx.strokeRect(
49 + m.actualBoundingBoxLeft,
ctx.strokeRect(49 + m.actualBoundingBoxLeft,
99 - m.actualBoundingBoxAscent, 99 - m.actualBoundingBoxAscent,
m.actualBoundingBoxRight - m.actualBoundingBoxLeft, m.actualBoundingBoxRight - m.actualBoundingBoxLeft,
m.actualBoundingBoxAscent + m.actualBoundingBoxDescent); m.actualBoundingBoxAscent + m.actualBoundingBoxDescent
)
var out = fs.createWriteStream(__dirname + '/text.png')
, stream = canvas.createPNGStream();
stream.on('data', function(chunk){ canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'text.png')))
out.write(chunk);
});

234
examples/voronoi.js
View File

@ -1,140 +1,134 @@
var http = require('http')
var Canvas = require('..')
/** var canvas = new Canvas(1920, 1200)
* Module dependencies. var ctx = canvas.getContext('2d')
*/
var Canvas = require('../lib/canvas') var voronoiFactory = require('./rhill-voronoi-core-min')
, canvas = new Canvas(1920, 1200)
, ctx = canvas.getContext('2d')
, http = require('http')
, fs = require('fs');
var voronoiFactory = require('./rhill-voronoi-core-min.js');
http.createServer(function (req, res) { http.createServer(function (req, res) {
var voronoi = voronoiFactory() var x, y, v, iHalfedge
, start = new Date;
var bbox = { xl: 0, xr: canvas.width, yt: 0, yb: canvas.height };
for (var i =0 ;i<340;i++)
{
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height;
voronoi.addSites([{x:x,y:y}]);
};
var diagram = voronoi.compute(bbox);
ctx.beginPath();
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
// voronoi
ctx.strokeStyle='rgba(255,255,255,0.5)';
ctx.lineWidth = 4;
// edges
var edges = diagram.edges;
var nEdges = edges.length;
var sites = diagram.sites;
var nSites = sites.length;
for (var iSite=nSites-1; iSite>=0; iSite-=1)
{
site = sites[iSite];
ctx.rect(site.x-0.5,site.y-0.5,1,1);
// ctx.stroke();
var cell = diagram.cells[diagram.sites[iSite].id];
if (cell !== undefined)
{
var halfedges = cell.halfedges;
var nHalfedges = halfedges.length;
if (nHalfedges < 3) {return;}
var minx = canvas.width;
var miny = canvas.height;
var maxx = 0;
var maxy = 0;
var v = halfedges[0].getStartpoint();
ctx.beginPath();
ctx.moveTo(v.x,v.y);
for (var iHalfedge=0; iHalfedge<nHalfedges; iHalfedge++)
{
v = halfedges[iHalfedge].getEndpoint();
ctx.lineTo(v.x,v.y);
if (v.x< minx) minx = v.x;
if (v.y< miny) miny = v.y;
if (v.x> maxx) maxx = v.x;
if (v.y> maxy) maxy = v.y;
}
var C = Math.floor(Math.random()*128 + 127).toString();
var voronoi = voronoiFactory()
var start = new Date()
var bbox = { xl: 0, xr: canvas.width, yt: 0, yb: canvas.height }
var midx = (maxx+minx)/2; for (var i = 0; i < 340; i++) {
var midy = (maxy+miny)/2; x = Math.random() * canvas.width
var R = 0; y = Math.random() * canvas.height
voronoi.addSites([{ x: x, y: y }])
for (var iHalfedge=0; iHalfedge<nHalfedges; iHalfedge++)
{
v = halfedges[iHalfedge].getEndpoint();
var dx = v.x - site.x;
var dy = v.y - site.y;
var newR = Math.sqrt(dx*dx + dy*dy);
if (newR >R) R = newR;
} }
midx = site.x;
midy = site.y;
var radgrad = ctx.createRadialGradient(midx+R*0.3,midy-R*0.3,0,midx,midy,R);
radgrad.addColorStop(0, "#09760b");
radgrad.addColorStop(1.0, "black");
ctx.fillStyle = radgrad;
ctx.fill();
var radgrad2 = ctx.createRadialGradient(midx-R*0.5,midy+R*0.5,R*0.1,midx,midy,R);
radgrad2.addColorStop(0, "rgba(255,255,255,0.5)");
radgrad2.addColorStop(0.04, "rgba(255,255,255,0.3)");
radgrad2.addColorStop(0.05, "rgba(255,255,255,0)");
var diagram = voronoi.compute(bbox)
ctx.fillStyle = radgrad2; ctx.beginPath()
ctx.fill(); ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#fff'
ctx.fill()
ctx.strokeStyle = 'black'
ctx.stroke()
// voronoi
ctx.strokeStyle = 'rgba(255,255,255,0.5)'
ctx.lineWidth = 4
// edges
var edges = diagram.edges
var nEdges = edges.length
var sites = diagram.sites
var nSites = sites.length
for (var iSite = nSites - 1; iSite >= 0; iSite -= 1) {
var site = sites[iSite]
ctx.rect(site.x - 0.5, site.y - 0.5, 1, 1)
var cell = diagram.cells[diagram.sites[iSite].id]
if (cell !== undefined) {
var halfedges = cell.halfedges
var nHalfedges = halfedges.length
if (nHalfedges < 3) return
var minx = canvas.width
var miny = canvas.height
var maxx = 0
var maxy = 0
v = halfedges[0].getStartpoint()
ctx.beginPath()
ctx.moveTo(v.x, v.y)
for (iHalfedge = 0; iHalfedge < nHalfedges; iHalfedge++) {
v = halfedges[iHalfedge].getEndpoint()
ctx.lineTo(v.x, v.y)
if (v.x < minx) minx = v.x
if (v.y < miny) miny = v.y
if (v.x > maxx) maxx = v.x
if (v.y > maxy) maxy = v.y
}
var lingrad = ctx.createLinearGradient(minx, site.y, minx+100, site.y-20); var midx = (maxx + minx) / 2
lingrad.addColorStop(0.0, "rgba(255,255,255,0.5)"); var midy = (maxy + miny) / 2
lingrad.addColorStop(0.2, "rgba(255,255,255,0.2)"); var R = 0
lingrad.addColorStop(1.0, "rgba(255,255,255,0)");
ctx.fillStyle = lingrad;
ctx.fill();
for (iHalfedge = 0; iHalfedge < nHalfedges; iHalfedge++) {
v = halfedges[iHalfedge].getEndpoint()
var dx = v.x - site.x
var dy = v.y - site.y
var newR = Math.sqrt(dx * dx + dy * dy)
if (newR > R) R = newR
} }
midx = site.x
midy = site.y
var radgrad = ctx.createRadialGradient(midx + R * 0.3, midy - R * 0.3, 0, midx, midy, R)
radgrad.addColorStop(0, '#09760b')
radgrad.addColorStop(1.0, 'black')
ctx.fillStyle = radgrad
ctx.fill()
var radgrad2 = ctx.createRadialGradient(midx - R * 0.5, midy + R * 0.5, R * 0.1, midx, midy, R)
radgrad2.addColorStop(0, 'rgba(255,255,255,0.5)')
radgrad2.addColorStop(0.04, 'rgba(255,255,255,0.3)')
radgrad2.addColorStop(0.05, 'rgba(255,255,255,0)')
ctx.fillStyle = radgrad2
ctx.fill()
var lingrad = ctx.createLinearGradient(minx, site.y, minx + 100, site.y - 20)
lingrad.addColorStop(0.0, 'rgba(255,255,255,0.5)')
lingrad.addColorStop(0.2, 'rgba(255,255,255,0.2)')
lingrad.addColorStop(1.0, 'rgba(255,255,255,0)')
ctx.fillStyle = lingrad
ctx.fill()
} }
}
if (nEdges) {
var edge
ctx.beginPath()
if (nEdges)
{
var edge, v;
ctx.beginPath();
for (var iEdge = nEdges - 1; iEdge >= 0; iEdge -= 1) { for (var iEdge = nEdges - 1; iEdge >= 0; iEdge -= 1) {
edge = edges[iEdge]; edge = edges[iEdge]
v = edge.va; v = edge.va
ctx.moveTo(v.x,v.y); ctx.moveTo(v.x, v.y)
v = edge.vb; v = edge.vb
ctx.lineTo(v.x,v.y); ctx.lineTo(v.x, v.y)
} }
ctx.stroke();
ctx.stroke()
} }
canvas.toBuffer(function (err, buf) { canvas.toBuffer(function (err, buf) {
var duration = new Date - start; if (err) throw err
console.log('Rendered in %dms', duration);
res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Length': buf.length }); var duration = new Date() - start
res.end(buf); console.log('Rendered in %dms', duration)
});
}).listen(3000); res.writeHead(200, {
console.log('Server running on port 3000'); 'Content-Type': 'image/png',
'Content-Length': buf.length
})
res.end(buf)
})
}).listen(3000, function () {
console.log('Server running on port 3000')
})

5
package.json
View File

@ -24,7 +24,7 @@
"prebenchmark": "node-gyp build", "prebenchmark": "node-gyp build",
"benchmark": "node benchmarks/run.js", "benchmark": "node benchmarks/run.js",
"pretest": "node-gyp build", "pretest": "node-gyp build",
"test": "mocha test/*.test.js", "test": "standard examples/*.js && mocha test/*.test.js",
"pretest-server": "node-gyp build", "pretest-server": "node-gyp build",
"test-server": "node test/server.js" "test-server": "node test/server.js"
}, },
@ -35,7 +35,8 @@
"body-parser": "^1.13.3", "body-parser": "^1.13.3",
"express": "^4.13.2", "express": "^4.13.2",
"jade": "^1.11.0", "jade": "^1.11.0",
"mocha": "*" "mocha": "*",
"standard": "^7.1.1"
}, },
"engines": { "engines": {
"node": ">=0.8.0" "node": ">=0.8.0"

Write Preview
Loading…
Cancel
Save