diff --git a/examples/clock.js b/examples/clock.js index 4ed77cc..3d847a7 100644 --- a/examples/clock.js +++ b/examples/clock.js @@ -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); -}); \ No newline at end of file + clock(ctx) + + canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'clock.png'))) +} diff --git a/examples/crop.js b/examples/crop.js index 37bd8f3..86fe1c7 100644 --- a/examples/crop.js +++ b/examples/crop.js @@ -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') diff --git a/examples/font.js b/examples/font.js index 1a33f3b..f3d7a2d 100644 --- a/examples/font.js +++ b/examples/font.js @@ -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'))) diff --git a/examples/globalAlpha.js b/examples/globalAlpha.js index 4d79e24..2af849e 100644 --- a/examples/globalAlpha.js +++ b/examples/globalAlpha.js @@ -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); -}); \ No newline at end of file +canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'globalAlpha.png'))) diff --git a/examples/gradients.js b/examples/gradients.js index 70ac649..3a6ff81 100644 --- a/examples/gradients.js +++ b/examples/gradients.js @@ -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); -}); \ No newline at end of file +canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'gradients.png'))) diff --git a/examples/grayscale-image.js b/examples/grayscale-image.js index 5c37657..1ee12b1 100644 --- a/examples/grayscale-image.js +++ b/examples/grayscale-image.js @@ -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); -}); \ No newline at end of file +canvas.createJPEGStream().pipe(fs.createWriteStream(path.join(__dirname, 'passedThroughGrayscale.jpg'))) diff --git a/examples/image-src.js b/examples/image-src.js index b25ffa3..51ed4b3 100644 --- a/examples/image-src.js +++ b/examples/image-src.js @@ -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); -}); \ No newline at end of file +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'))) diff --git a/examples/kraken.js b/examples/kraken.js index 95fc850..21d278c 100644 --- a/examples/kraken.js +++ b/examples/kraken.js @@ -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); -}); \ No newline at end of file +canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'kraken.png'))) diff --git a/examples/live-clock.js b/examples/live-clock.js index e8e3e97..08bf255 100644 --- a/examples/live-clock.js +++ b/examples/live-clock.js @@ -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('' - + '' - + ''); -}).listen(3000); -console.log('Server started on port 3000'); + clock(ctx) + + res.writeHead(200, { 'Content-Type': 'text/html' }) + res.end( + '' + + '' + ) +}).listen(3000, function () { + console.log('Server started on port 3000') +}) diff --git a/examples/multi-page-pdf.js b/examples/multi-page-pdf.js index 8bf994b..cd27f2f 100644 --- a/examples/multi-page-pdf.js +++ b/examples/multi-page-pdf.js @@ -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'); \ No newline at end of file +fs.writeFile('out.pdf', canvas.toBuffer(), function (err) { + if (err) throw err + + console.log('created out.pdf') +}) diff --git a/examples/pango-glyphs.js b/examples/pango-glyphs.js index f0e1efd..695fe17 100644 --- a/examples/pango-glyphs.js +++ b/examples/pango-glyphs.js @@ -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'))) diff --git a/examples/pdf-images.js b/examples/pdf-images.js index 76862b1..69e59e3 100644 --- a/examples/pdf-images.js +++ b/examples/pdf-images.js @@ -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'); \ No newline at end of file +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') +}) diff --git a/examples/ray.js b/examples/ray.js index 93b325a..a191034 100644 --- a/examples/ray.js +++ b/examples/ray.js @@ -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'))) diff --git a/examples/resize.js b/examples/resize.js index 7284fe9..9703b32 100644 --- a/examples/resize.js +++ b/examples/resize.js @@ -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')) diff --git a/examples/rhill-voronoi-core-min.js b/examples/rhill-voronoi-core-min.js index 3f7bd4e..dda97c8 100644 --- a/examples/rhill-voronoi-core-min.js +++ b/examples/rhill-voronoi-core-min.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /*! A custom Javascript implementation of Steven J. Fortune's algorithm to compute Voronoi diagrams. @@ -111,7 +112,6 @@ Voronoi.Vertex object: */ function Voronoi(){this.sites=[];this.siteEvents=[];this.circEvents=[];this.arcs=[];this.edges=[];this.cells=new this.Cells()}Voronoi.prototype.SITE_EVENT=0;Voronoi.prototype.CIRCLE_EVENT=1;Voronoi.prototype.VOID_EVENT=-1;Voronoi.prototype.sqrt=Math.sqrt;Voronoi.prototype.abs=Math.abs;Voronoi.prototype.floor=Math.floor;Voronoi.prototype.random=Math.random;Voronoi.prototype.round=Math.round;Voronoi.prototype.min=Math.min;Voronoi.prototype.max=Math.max;Voronoi.prototype.pow=Math.pow;Voronoi.prototype.isNaN=isNaN;Voronoi.prototype.PI=Math.PI;Voronoi.prototype.EPSILON=1e-5;Voronoi.prototype.equalWithEpsilon=function(a,b){return this.abs(a-b)<1e-5};Voronoi.prototype.greaterThanWithEpsilon=function(a,b){return(a-b)>1e-5};Voronoi.prototype.greaterThanOrEqualWithEpsilon=function(a,b){return(b-a)<1e-5};Voronoi.prototype.lessThanWithEpsilon=function(a,b){return(b-a)>1e-5};Voronoi.prototype.lessThanOrEqualWithEpsilon=function(a,b){return(a-b)<1e-5};Voronoi.prototype.Beachsection=function(a){this.site=a;this.edge=null;this.sweep=-Infinity;this.lid=0;this.circleEvent=undefined};Voronoi.prototype.Beachsection.prototype.sqrt=Math.sqrt;Voronoi.prototype.Beachsection.prototype._leftParabolicCut=function(a,c,d){var e=a.x;var f=a.y;if(f==d){return e}var g=c.x;var h=c.y;if(h==d){return g}if(f==h){return(e+g)/2}var i=f-d;var j=h-d;var k=g-e;var l=1/i-1/j;var b=k/j;return(-b+this.sqrt(b*b-2*l*(k*k/(-2*j)-h+j/2+f-i/2)))/l+e};Voronoi.prototype.Beachsection.prototype.leftParabolicCut=function(a,b){if(this.sweep!==b||this.lid!==a.id){this.sweep=b;this.lid=a.id;this.lBreak=this._leftParabolicCut(this.site,a,b)}return this.lBreak};Voronoi.prototype.Beachsection.prototype.isCollapsing=function(){return this.circleEvent!==undefined&&this.circleEvent.type===Voronoi.prototype.CIRCLE_EVENT};Voronoi.prototype.Site=function(x,y){this.id=this.constructor.prototype.idgenerator++;this.x=x;this.y=y};Voronoi.prototype.Site.prototype.destroy=function(){this.id=0};Voronoi.prototype.Vertex=function(x,y){this.x=x;this.y=y};Voronoi.prototype.Edge=function(a,b){this.id=this.constructor.prototype.idgenerator++;this.lSite=a;this.rSite=b;this.va=this.vb=undefined};Voronoi.prototype.Halfedge=function(a,b){this.site=a;this.edge=b};Voronoi.prototype.Cell=function(a){this.site=a;this.halfedges=[]};Voronoi.prototype.Cells=function(){this.numCells=0};Voronoi.prototype.Cells.prototype.addCell=function(a){this[a.site.id]=a;this.numCells++};Voronoi.prototype.Cells.prototype.removeCell=function(a){delete this[a.site.id];this.numCells--};Voronoi.prototype.Site.prototype.idgenerator=1;Voronoi.prototype.Edge.prototype.isLineSegment=function(){return this.id!==0&&Boolean(this.va)&&Boolean(this.vb)};Voronoi.prototype.Edge.prototype.idgenerator=1;Voronoi.prototype.Halfedge.prototype.isLineSegment=function(){return this.edge.id!==0&&Boolean(this.edge.va)&&Boolean(this.edge.vb)};Voronoi.prototype.Halfedge.prototype.getStartpoint=function(){return this.edge.lSite.id==this.site.id?this.edge.va:this.edge.vb};Voronoi.prototype.Halfedge.prototype.getEndpoint=function(){return this.edge.lSite.id==this.site.id?this.edge.vb:this.edge.va};Voronoi.prototype.leftBreakPoint=function(a,b){var c=this.arcs[a];var d=c.site;if(d.y==b){return d.x}if(a===0){return-Infinity}return c.leftParabolicCut(this.arcs[a-1].site,b)};Voronoi.prototype.rightBreakPoint=function(a,b){if(a>1;if(this.lessThanWithEpsilon(x,this.leftBreakPoint(i,a))){r=i;continue}if(this.greaterThanOrEqualWithEpsilon(x,this.rightBreakPoint(i,a))){l=i+1;continue}return i}return l};Voronoi.prototype.findDeletionPoint=function(x,a){var n=this.arcs.length;if(!n){return 0}var l=0;var r=n;var i;var b;while(l>1;b=this.leftBreakPoint(i,a);if(this.lessThanWithEpsilon(x,b)){r=i;continue}if(this.greaterThanWithEpsilon(x,b)){l=i+1;continue}b=this.rightBreakPoint(i,a);if(this.greaterThanWithEpsilon(x,b)){l=i+1;continue}if(this.lessThanWithEpsilon(x,b)){r=i;continue}return i}};Voronoi.prototype.createEdge=function(a,b,c,d){var e=new this.Edge(a,b);this.edges.push(e);if(c!==undefined){this.setEdgeStartpoint(e,a,b,c)}if(d!==undefined){this.setEdgeEndpoint(e,a,b,d)}this.cells[a.id].halfedges.push(new this.Halfedge(a,e));this.cells[b.id].halfedges.push(new this.Halfedge(b,e));return e};Voronoi.prototype.createBorderEdge=function(a,b,c){var d=new this.Edge(a,null);d.va=b;d.vb=c;this.edges.push(d);return d};Voronoi.prototype.destroyEdge=function(a){a.id=0};Voronoi.prototype.setEdgeStartpoint=function(a,b,c,d){if(a.va===undefined&&a.vb===undefined){a.va=d;a.lSite=b;a.rSite=c}else if(a.lSite.id==c.id){a.vb=d}else{a.va=d}};Voronoi.prototype.setEdgeEndpoint=function(a,b,c,d){this.setEdgeStartpoint(a,c,b,d)};Voronoi.prototype.removeArc=function(a){var x=a.center.x;var y=a.center.y;var b=a.y;var c=this.findDeletionPoint(x,b);var d=c;while(d-1>0&&this.equalWithEpsilon(x,this.leftBreakPoint(d-1,b))){d--}var e=c;while(e+10&&this.equalWithEpsilon(a.x,this.rightBreakPoint(c-1,a.y))&&this.equalWithEpsilon(a.x,this.leftBreakPoint(c,a.y))){d=this.arcs[c-1];rArc=this.arcs[c];this.voidCircleEvents(c-1,c);var e=this.circumcircle(d.site,a,rArc.site);this.setEdgeStartpoint(rArc.edge,d.site,rArc.site,new this.Vertex(e.x,e.y));b.edge=this.createEdge(d.site,b.site,undefined,new this.Vertex(e.x,e.y));rArc.edge=this.createEdge(b.site,rArc.site,undefined,new this.Vertex(e.x,e.y));this.arcs.splice(c,0,b);this.addCircleEvents(c-1,a.y);this.addCircleEvents(c+1,a.y);return}this.voidCircleEvents(c);d=this.arcs[c];rArc=new this.Beachsection(d.site);this.arcs.splice(c+1,0,b,rArc);b.edge=rArc.edge=this.createEdge(d.site,b.site);this.addCircleEvents(c,a.y);this.addCircleEvents(c+2,a.y)};Voronoi.prototype.circumcircle=function(a,b,c){var e=a.x;var f=a.y;var g=b.x-e;var h=b.y-f;var i=c.x-e;var j=c.y-f;var d=2*(g*j-h*i);var k=g*g+h*h;var l=i*i+j*j;var x=(j*k-h*l)/d;var y=(g*l-i*k)/d;return{x:x+e,y:y+f,radius:this.sqrt(x*x+y*y)}};Voronoi.prototype.addCircleEvents=function(a,b){if(a<=0||a>=this.arcs.length-1){return}var c=this.arcs[a];var d=this.arcs[a-1].site;var e=this.arcs[a].site;var f=this.arcs[a+1].site;if(d.id==f.id||d.id==e.id||e.id==f.id){return}if((d.y-e.y)*(f.x-e.x)<=(d.x-e.x)*(f.y-e.y)){return}var g=this.circumcircle(d,e,f);var h=g.y+g.radius;if(!this.greaterThanOrEqualWithEpsilon(h,b)){return}var i={type:this.CIRCLE_EVENT,site:e,x:g.x,y:h,center:{x:g.x,y:g.y}};c.circleEvent=i;this.queuePushCircle(i)};Voronoi.prototype.voidCircleEvents=function(a,b){if(b===undefined){b=a}a=this.max(a,0);b=this.min(b,this.arcs.length-1);while(a<=b){var c=this.arcs[a];if(c.circleEvent!==undefined){c.circleEvent.type=this.VOID_EVENT;c.circleEvent=undefined}a++}};Voronoi.prototype.queueSanitize=function(){var q=this.circEvents;var a=q.length;if(!a){return}var b=a;while(b&&q[b-1].type===this.VOID_EVENT){b--}var c=a-b;if(c){q.splice(b,c)}var d=this.arcs.length;if(q.length0&&q[a-1].type!==this.VOID_EVENT){a--}if(a<=0){break}b=a-1;while(b>0&&q[b-1].type===this.VOID_EVENT){b--}c=a-b;q.splice(b,c);if(q.length0?this.siteEvents[this.siteEvents.length-1]:null;var b=this.circEvents.length>0?this.circEvents[this.circEvents.length-1]:null;if(Boolean(a)!==Boolean(b)){return a?this.siteEvents.pop():this.circEvents.pop()}if(!a){return null}if(a.y>1;c=o.y-q[i].y;if(!c){c=o.x-q[i].x}if(c>0){r=i}else if(c<0){l=i+1}else{return}}q.splice(l,0,o)}else{q.push(o)}};Voronoi.prototype.queuePushCircle=function(o){var q=this.circEvents;var r=q.length;if(r){var l=0;var i,c;while(l>1;c=o.y-q[i].y;if(!c){c=o.x-q[i].x}if(c>0){r=i}else{l=i+1}}q.splice(l,0,o)}else{q.push(o)}};Voronoi.prototype.getBisector=function(a,b){var r={x:(a.x+b.x)/2,y:(a.y+b.y)/2};if(b.y==a.y){return r}r.m=(a.x-b.x)/(b.y-a.y);r.b=r.y-r.m*r.x;return r};Voronoi.prototype.connectEdge=function(a,b){var c=a.vb;if(!!c){return true}var d=a.va;var e=b.xl;var g=b.xr;var h=b.yt;var i=b.yb;var j=a.lSite;var k=a.rSite;var f=this.getBisector(j,k);if(f.m===undefined){if(f.x=g){return false}if(j.x>k.x){if(d===undefined){d=new this.Vertex(f.x,h)}else if(d.y>=i){return false}c=new this.Vertex(f.x,i)}else{if(d===undefined){d=new this.Vertex(f.x,i)}else if(d.y=g){return false}c=new this.Vertex(g,f.m*g+f.b)}else{if(d===undefined){d=new this.Vertex(g,f.m*g+f.b)}else if(d.xk.x){if(d===undefined){d=new this.Vertex((h-f.b)/f.m,h)}else if(d.y>=i){return false}c=new this.Vertex((i-f.b)/f.m,i)}else{if(d===undefined){d=new this.Vertex((i-f.b)/f.m,i)}else if(d.y0){if(r>h){return false}else if(r>g){g=r}}q=b.xr-c;if(i===0&&q<0){return false}r=q/i;if(i<0){if(r>h){return false}else if(r>g){g=r}}else if(i>0){if(r0){if(r>h){return false}else if(r>g){g=r}}q=b.yb-d;if(j===0&&q<0){return false}r=q/j;if(j<0){if(r>h){return false}else if(r>g){g=r}}else if(j>0){if(r=0;e-=1){d=b[e];if(!this.connectEdge(d,a)||!this.clipEdge(d,a)||this.verticesAreEqual(d.va,d.vb)){this.destroyEdge(d);b.splice(e,1)}}};Voronoi.prototype.verticesAreEqual=function(a,b){return this.equalWithEpsilon(a.x,b.x)&&this.equalWithEpsilon(a.y,b.y)};Voronoi.prototype.sortHalfedgesCallback=function(a,b){var c=a.getStartpoint();var d=a.getEndpoint();var e=b.getStartpoint();var f=b.getEndpoint();return Math.atan2(f.y-e.y,f.x-e.x)-Math.atan2(d.y-c.y,d.x-c.x)};Voronoi.prototype.closeCells=function(a){var b=a.xl;var c=a.xr;var d=a.yt;var e=a.yb;this.clipEdges(a);var f=this.cells;var g;var h,iRight;var i,nHalfedges;var j;var k,endpoint;var l,vb;for(var m in f){g=f[m];if(!(g instanceof this.Cell)){continue}i=g.halfedges;h=i.length;while(h){iRight=h;while(iRight>0&&i[iRight-1].isLineSegment()){iRight--}h=iRight;while(h>0&&!i[h-1].isLineSegment()){h--}if(h===iRight){break}i.splice(h,iRight-h)}if(i.length===0){f.removeCell(g);continue}i.sort(this.sortHalfedgesCallback);nHalfedges=i.length;h=0;while(h=0;e--){d=this.sites[e];if(!d.id){this.sites.splice(e,1)}else{this.queuePushSite({type:this.SITE_EVENT,x:d.x,y:d.y,site:d})}}this.arcs=[];this.edges=[];this.cells=new this.Cells();var f=this.queuePop();while(f){if(f.type===this.SITE_EVENT){this.cells.addCell(new this.Cell(f.site));this.addArc(f.site)}else if(f.type===this.CIRCLE_EVENT){this.removeArc(f)}else{this.queueSanitize()}f=this.queuePop()}this.closeCells(a);var g=new Date();var h={sites:this.sites,cells:this.cells,edges:this.edges,execTime:g.getTime()-b.getTime()};this.arcs=[];this.edges=[];this.cells=new this.Cells();return h}; -module.exports = function() -{ - return new Voronoi(); +module.exports = function () { + return new Voronoi() } diff --git a/examples/small-pdf.js b/examples/small-pdf.js index 3004ffc..94d25d7 100644 --- a/examples/small-pdf.js +++ b/examples/small-pdf.js @@ -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'); \ No newline at end of file +fs.writeFile('out.pdf', canvas.toBuffer(), function (err) { + if (err) throw err + + console.log('created out.pdf') +}) diff --git a/examples/small-svg.js b/examples/small-svg.js index 574c258..992830c 100644 --- a/examples/small-svg.js +++ b/examples/small-svg.js @@ -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') +}) diff --git a/examples/spark.js b/examples/spark.js index 6d6652d..c6aafa9 100644 --- a/examples/spark.js +++ b/examples/spark.js @@ -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'))) diff --git a/examples/state.js b/examples/state.js index 4b59c5e..a851838 100644 --- a/examples/state.js +++ b/examples/state.js @@ -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); -}); \ No newline at end of file +canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'state.png'))) diff --git a/examples/text.js b/examples/text.js index 945a0e1..112741d 100644 --- a/examples/text.js +++ b/examples/text.js @@ -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'))) diff --git a/examples/voronoi.js b/examples/voronoi.js index 9f028bc..567d02b 100644 --- a/examples/voronoi.js +++ b/examples/voronoi.js @@ -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 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; iHalfedgeR) 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') +}) diff --git a/package.json b/package.json index cf0b9f6..9e9f57c 100644 --- a/package.json +++ b/package.json @@ -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"