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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 196
      examples/clock.js
  2. 47
      examples/crop.js
  3. 53
      examples/font.js
  4. 54
      examples/globalAlpha.js
  5. 44
      examples/gradients.js
  6. 28
      examples/grayscale-image.js
  7. 79
      examples/image-src.js
  8. 190
      examples/kraken.js
  9. 124
      examples/live-clock.js
  10. 57
      examples/multi-page-pdf.js
  11. 36
      examples/pango-glyphs.js
  12. 75
      examples/pdf-images.js
  13. 132
      examples/ray.js
  14. 49
      examples/resize.js
  15. 6
      examples/rhill-voronoi-core-min.js
  16. 33
      examples/small-pdf.js
  17. 33
      examples/small-svg.js
  18. 67
      examples/spark.js
  19. 44
      examples/state.js
  20. 66
      examples/text.js
  21. 264
      examples/voronoi.js
  22. 5
      package.json

196
examples/clock.js
View File

@ -1,113 +1,113 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/**
* Module dependencies.
*/
var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, ctx = canvas.getContext('2d')
, fs = require('fs');
function getX(angle) {
return -Math.sin(angle + Math.PI);
function getX (angle) {
return -Math.sin(angle + Math.PI)
}
function getY(angle) {
return Math.cos(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';
function clock (ctx) {
var x, y, i
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()
// 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();
ctx.lineWidth = 8
ctx.strokeStyle = '#000000'
for (i = 0; i < 12; i++) {
x = getX(Math.PI / 6 * i)
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();
ctx.lineWidth = 5
ctx.strokeStyle = '#000000'
for (i = 0; i < 60; i++) {
if (i % 5 !== 0) {
x = getX(Math.PI / 30 * i)
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();
var sec = now.getSeconds()
var min = now.getMinutes()
var hr = now.getHours() % 12
ctx.fillStyle = 'black'
// Write hours
x = getX(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.beginPath()
ctx.moveTo(x * -20, y * -20)
ctx.lineTo(x * 80, y * 80)
ctx.stroke()
// Write minutes
x = getX((Math.PI / 30) * min + (Math.PI / 1800) * sec)
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();
x = getX(sec * Math.PI / 30)
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()
}
clock(ctx);
module.exports = clock
var out = fs.createWriteStream(__dirname + '/clock.png')
, stream = canvas.createPNGStream();
if (require.main === module) {
var canvas = new Canvas(320, 320)
var ctx = canvas.getContext('2d')
stream.on('data', function(chunk){
out.write(chunk);
});
clock(ctx)
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'clock.png')))
}

47
examples/crop.js
View File

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

53
examples/font.js
View File

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

54
examples/globalAlpha.js
View File

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

44
examples/gradients.js
View File

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

28
examples/grayscale-image.js
View File

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

79
examples/image-src.js
View File

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

190
examples/kraken.js
View File

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

124
examples/live-clock.js
View File

@ -1,113 +1,19 @@
var http = require('http')
var Canvas = require('..')
/**
* Module dependencies.
*/
var clock = require('./clock')
var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, 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();
}
var canvas = new Canvas(320, 320)
var ctx = canvas.getContext('2d')
http.createServer(function (req, res) {
clock(ctx);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(''
+ '<meta http-equiv="refresh" content="1;" />'
+ '<img src="' + canvas.toDataURL() + '" />');
}).listen(3000);
console.log('Server started on port 3000');
clock(ctx)
res.writeHead(200, { 'Content-Type': 'text/html' })
res.end(
'<meta http-equiv="refresh" content="1;" />' +
'<img src="' + canvas.toDataURL() + '" />'
)
}).listen(3000, function () {
console.log('Server started on port 3000')
})

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

@ -1,39 +1,42 @@
var fs = require('fs')
var Canvas = require('..')
var Canvas = require('../')
, canvas = new Canvas(500, 500, 'pdf')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var canvas = new Canvas(500, 500, 'pdf')
var ctx = canvas.getContext('2d')
var x, y;
var x, y
function reset() {
x = 50;
y = 80;
function reset () {
x = 50
y = 80
}
function h1(str) {
ctx.font = '22px Helvetica';
ctx.fillText(str, x, y);
function h1 (str) {
ctx.font = '22px Helvetica'
ctx.fillText(str, x, y)
}
function p(str) {
ctx.font = '10px Arial';
ctx.fillText(str, x, y += 20);
function p (str) {
ctx.font = '10px Arial'
ctx.fillText(str, x, (y += 20))
}
reset();
h1('PDF demo');
p('Multi-page PDF demonstration');
ctx.addPage();
reset()
h1('PDF demo')
p('Multi-page PDF demonstration')
ctx.addPage()
reset();
h1('Page #2');
p('This is the second page');
ctx.addPage();
reset()
h1('Page #2')
p('This is the second page')
ctx.addPage()
reset();
h1('Page #3');
p('This is the third page');
reset()
h1('Page #3')
p('This is the third page')
fs.writeFile('out.pdf', canvas.toBuffer());
console.log('created out.pdf');
fs.writeFile('out.pdf', canvas.toBuffer(), function (err) {
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('..')
/**
* Module dependencies.
*/
var canvas = new Canvas(400, 100)
var ctx = canvas.getContext('2d')
var Canvas = require('../lib/canvas')
, canvas = new Canvas(400, 100)
, ctx = canvas.getContext('2d')
, fs = require('fs');
ctx.globalAlpha = 1
ctx.font = 'normal 16px Impact'
ctx.globalAlpha = 1;
ctx.font = 'normal 16px Impact';
ctx.textBaseline = 'top';
ctx.textBaseline = 'top'
// Note this demo depends node-canvas being installed with pango support,
// and your system having installed fonts supporting the glyphs.
ctx.fillStyle = '#000';
ctx.fillText("English: Some text in Impact.", 10, 10);
ctx.fillText("Japanese: 図書館の中では、静かにする。", 10, 30);
ctx.fillText("Arabic: اللغة العربية هي أكثر اللغات تحدثا ضمن", 10, 50);
ctx.fillText("Korean: 모타는사라미 못하는 사람이", 10, 70);
var out = fs.createWriteStream(__dirname + '/pango-glyphs.png')
, stream = canvas.createPNGStream();
ctx.fillStyle = '#000'
ctx.fillText('English: Some text in Impact.', 10, 10)
ctx.fillText('Japanese: 図書館の中では、静かにする。', 10, 30)
ctx.fillText('Arabic: اللغة العربية هي أكثر اللغات تحدثا ضمن', 10, 50)
ctx.fillText('Korean: 모타는사라미 못하는 사람이', 10, 70)
stream.on('data', function(chunk){
out.write(chunk);
});
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'pango-glyphs.png')))

75
examples/pdf-images.js
View File

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

132
examples/ray.js
View File

@ -1,85 +1,85 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/**
* Module dependencies.
*/
var canvas = new Canvas(243 * 4, 243)
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){
ctx.fillStyle = getPointColour(122,122);
ctx.fillRect(0,0,240,240);
renderLevel(level,81,0);
function render (level) {
ctx.fillStyle = getPointColour(122, 122)
ctx.fillRect(0, 0, 240, 240)
renderLevel(level, 81, 0)
}
function renderLevel(minimumLevel,level,y){
for (var x=0; x < 243 / level; ++x) {
drawBlock(x,y,level);
function renderLevel (minimumLevel, level, y) {
var x
for (x = 0; x < 243 / level; ++x) {
drawBlock(x, y, level)
}
for (var x=0; x < 243 / level; x+=3){
drawBlock(x,y+1,level);
drawBlock(x+2,y+1,level);
for (x = 0; x < 243 / level; x += 3) {
drawBlock(x, y + 1, level)
drawBlock(x + 2, y + 1, level)
}
for (var x=0; x < 243 / level; ++x){
drawBlock(x,y+2,level);
for (x = 0; x < 243 / level; ++x) {
drawBlock(x, y + 2, level)
}
if ((y += 3) >= 243 / level){
y=0;
level /= 3;
if ((y += 3) >= 243 / level) {
y = 0
level /= 3
}
if (level >= minimumLevel){
renderLevel(minimumLevel, level, y);
if (level >= minimumLevel) {
renderLevel(minimumLevel, level, y)
}
}
function drawBlock(x,y,level){
function drawBlock (x, y, level) {
ctx.fillStyle = getPointColour(
x * level + (level-1) / 2
, y * level + (level-1) / 2);
x * level + (level - 1) / 2,
y * level + (level - 1) / 2
)
ctx.fillRect(
x * level
, y * level
, level
, level
);
x * level,
y * level,
level,
level
)
}
function getPointColour(x,y){
x= x / 121.5 - 1;
y= -y / 121.5 + 1;
var x2y2 = x * x + y * y;
if (x2y2 > 1){
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))
+ ')'
;
}
function getPointColour (x, y) {
x = x / 121.5 - 1
y = -y / 121.5 + 1
var x2y2 = x * x + y * y
if (x2y2 > 1) {
return '#000'
}
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;
render(10);
ctx.translate(243,0);
render(6);
ctx.translate(243,0);
render(3);
ctx.translate(243,0);
render(1);
console.log('Rendered in %s seconds', (new Date - start) / 1000);
var start = new Date()
render(10)
ctx.translate(243, 0)
render(6)
ctx.translate(243, 0)
render(3)
ctx.translate(243, 0)
render(1)
console.log('Rendered in %s seconds', (new Date() - start) / 1000)
canvas.toBuffer(function(err, buf){
if (err) throw err;
fs.writeFile(__dirname + '/ray.png', buf);
});
canvas.pngStream().pipe(fs.createWriteStream(path.join(__dirname, 'ray.png')))

49
examples/resize.js
View File

@ -1,34 +1,31 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/**
* Module dependencies.
*/
var Image = Canvas.Image
var Canvas = require('../lib/canvas')
, Image = Canvas.Image
, fs = require('fs');
var img = new Image()
var start = new Date()
var img = new Image
, start = new Date;
img.onerror = function (err) {
throw err
}
img.onerror = function(err){
throw err;
};
img.onload = function () {
var width = 100
var height = 100
var canvas = new Canvas(width, height)
var ctx = canvas.getContext('2d')
var out = fs.createWriteStream(path.join(__dirname, 'resize.png'))
img.onload = function(){
var width = 100;
var height = 100;
var canvas = new Canvas(width, height);
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true
ctx.drawImage(img, 0, 0, width, height)
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0, width, height);
canvas.pngStream().pipe(out)
canvas.toBuffer(function(err, buf){
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('../')
, canvas = new Canvas(400, 200, 'pdf')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var canvas = new Canvas(400, 200, 'pdf')
var ctx = canvas.getContext('2d')
var y = 80
, x = 50;
var x = 50
ctx.font = '22px Helvetica';
ctx.fillText('node-canvas pdf', x, y);
ctx.font = '22px Helvetica'
ctx.fillText('node-canvas pdf', x, y)
ctx.font = '10px Arial';
ctx.fillText('Just a quick example of PDFs with node-canvas', x, y += 20);
ctx.font = '10px Arial'
ctx.fillText('Just a quick example of PDFs with node-canvas', x, (y += 20))
ctx.globalAlpha = .5;
ctx.fillRect(x, y += 20, 10, 10);
ctx.fillRect(x += 20, y, 10, 10);
ctx.fillRect(x += 20, y, 10, 10);
ctx.globalAlpha = 0.5
ctx.fillRect(x, (y += 20), 10, 10)
ctx.fillRect((x += 20), y, 10, 10)
ctx.fillRect((x += 20), y, 10, 10)
fs.writeFile('out.pdf', canvas.toBuffer());
console.log('created out.pdf');
fs.writeFile('out.pdf', canvas.toBuffer(), function (err) {
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('../')
, canvas = new Canvas(400, 200, 'svg')
, ctx = canvas.getContext('2d')
, fs = require('fs');
var canvas = new Canvas(400, 200, 'svg')
var ctx = canvas.getContext('2d')
var y = 80
, x = 50;
var x = 50
ctx.font = '22px Helvetica';
ctx.fillText('node-canvas SVG', x, y);
ctx.font = '22px Helvetica'
ctx.fillText('node-canvas SVG', x, y)
ctx.font = '10px Arial';
ctx.fillText('Just a quick example of SVGs with node-canvas', x, y += 20);
ctx.font = '10px Arial'
ctx.fillText('Just a quick example of SVGs with node-canvas', x, (y += 20))
ctx.globalAlpha = .5;
ctx.fillRect(x, y += 20, 10, 10);
ctx.fillRect(x += 20, y, 10, 10);
ctx.fillRect(x += 20, y, 10, 10);
ctx.globalAlpha = 0.5
ctx.fillRect(x, (y += 20), 10, 10)
ctx.fillRect((x += 20), y, 10, 10)
ctx.fillRect((x += 20), y, 10, 10)
fs.writeFile('out.svg', canvas.toBuffer());
console.log('created out.svg');
fs.writeFile('out.svg', canvas.toBuffer(), function (err) {
if (err) throw err
console.log('created out.svg')
})

67
examples/spark.js
View File

@ -1,46 +1,33 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')
/**
* Module dependencies.
*/
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) {
var canvas = new Canvas(40, 15)
var ctx = canvas.getContext('2d')
function spark (ctx, data) {
var len = data.length
, pad = 1
, width = ctx.canvas.width
, height = ctx.canvas.height
, barWidth = width / len
, max = data.max;
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
data.forEach(function(n, i){
var pad = 1
var width = ctx.canvas.width
var height = ctx.canvas.height
var barWidth = width / len
var max = Math.max.apply(null, data)
ctx.fillStyle = 'rgba(0,0,255,0.5)'
ctx.strokeStyle = 'red'
ctx.lineWidth = 1
data.forEach(function (n, i) {
var x = i * barWidth + pad
, y = height * (n / max)
ctx.lineTo(x, height - y);
ctx.fillRect(x, height, barWidth - pad, -y);
});
ctx.stroke();
var y = height * (n / max)
ctx.lineTo(x, height - y)
ctx.fillRect(x, height, barWidth - pad, -y)
})
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){
if (err) throw err;
fs.writeFile(__dirname + '/spark.png', buf);
});
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'spark.png')))

44
examples/state.js
View File

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

66
examples/text.js
View File

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

264
examples/voronoi.js
View File

@ -1,140 +1,134 @@
var http = require('http')
var Canvas = require('..')
/**
* Module dependencies.
*/
var canvas = new Canvas(1920, 1200)
var ctx = canvas.getContext('2d')
var Canvas = require('../lib/canvas')
, canvas = new Canvas(1920, 1200)
, ctx = canvas.getContext('2d')
, http = require('http')
, fs = require('fs');
var voronoiFactory = require('./rhill-voronoi-core-min.js');
var voronoiFactory = require('./rhill-voronoi-core-min')
http.createServer(function (req, res) {
var x, y, v, iHalfedge
var voronoi = voronoiFactory()
, 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 midx = (maxx+minx)/2;
var midy = (maxy+miny)/2;
var R = 0;
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)");
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, v;
ctx.beginPath();
for (var iEdge=nEdges-1; iEdge>=0; iEdge-=1) {
edge = edges[iEdge];
v = edge.va;
ctx.moveTo(v.x,v.y);
v = edge.vb;
ctx.lineTo(v.x,v.y);
}
ctx.stroke();
}
canvas.toBuffer(function(err, buf){
var duration = new Date - start;
console.log('Rendered in %dms', duration);
res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Length': buf.length });
res.end(buf);
});
}).listen(3000);
console.log('Server running on port 3000');
var start = new Date()
var bbox = { xl: 0, xr: canvas.width, yt: 0, yb: canvas.height }
for (var i = 0; i < 340; i++) {
x = Math.random() * canvas.width
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) {
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 midx = (maxx + minx) / 2
var midy = (maxy + miny) / 2
var R = 0
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()
for (var iEdge = nEdges - 1; iEdge >= 0; iEdge -= 1) {
edge = edges[iEdge]
v = edge.va
ctx.moveTo(v.x, v.y)
v = edge.vb
ctx.lineTo(v.x, v.y)
}
ctx.stroke()
}
canvas.toBuffer(function (err, buf) {
if (err) throw err
var duration = new Date() - start
console.log('Rendered in %dms', duration)
res.writeHead(200, {
'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",
"benchmark": "node benchmarks/run.js",
"pretest": "node-gyp build",
"test": "mocha test/*.test.js",
"test": "standard examples/*.js && mocha test/*.test.js",
"pretest-server": "node-gyp build",
"test-server": "node test/server.js"
},
@ -35,7 +35,8 @@
"body-parser": "^1.13.3",
"express": "^4.13.2",
"jade": "^1.11.0",
"mocha": "*"
"mocha": "*",
"standard": "^7.1.1"
},
"engines": {
"node": ">=0.8.0"

Write Preview
Loading…
Cancel
Save