From 47a069e8d17ab0ecff0365c08a2e31e8983ad709 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20Unneb=C3=A4ck?= Date: Sat, 29 Oct 2016 13:53:07 +0200 Subject: [PATCH 1/2] Cleanup browser testing - Remove pug in favour of simple html file - Stop sending code over the wire to eval on the server - Remove jpeg view since it doesn't make sense to have it here --- package.json | 4 +- test/{public => fixtures}/face.jpeg | Bin test/{public => fixtures}/star.png | Bin test/{public => fixtures}/state.png | Bin test/public/app.html | 19 + test/public/app.js | 166 +- test/public/style.css | 18 +- test/public/tests.js | 3698 ++++++++++++++------------- test/server.js | 126 +- test/views/layout.pug | 9 - test/views/tests.pug | 24 - 11 files changed, 1968 insertions(+), 2096 deletions(-) rename test/{public => fixtures}/face.jpeg (100%) rename test/{public => fixtures}/star.png (100%) rename test/{public => fixtures}/state.png (100%) create mode 100644 test/public/app.html delete mode 100644 test/views/layout.pug delete mode 100644 test/views/tests.pug diff --git a/package.json b/package.json index b9d2579..7dd6001 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": "standard examples/*.js && mocha test/*.test.js", + "test": "standard examples/*.js test/server.js test/public/*.js && mocha test/*.test.js", "pretest-server": "node-gyp build", "test-server": "node test/server.js" }, @@ -32,9 +32,7 @@ "nan": "^2.3.2" }, "devDependencies": { - "body-parser": "^1.13.3", "express": "^4.13.2", - "pug": "^2.0.0-beta3", "mocha": "*", "standard": "^7.1.1" }, diff --git a/test/public/face.jpeg b/test/fixtures/face.jpeg similarity index 100% rename from test/public/face.jpeg rename to test/fixtures/face.jpeg diff --git a/test/public/star.png b/test/fixtures/star.png similarity index 100% rename from test/public/star.png rename to test/fixtures/star.png diff --git a/test/public/state.png b/test/fixtures/state.png similarity index 100% rename from test/public/state.png rename to test/fixtures/state.png diff --git a/test/public/app.html b/test/public/app.html new file mode 100644 index 0000000..8948b78 --- /dev/null +++ b/test/public/app.html @@ -0,0 +1,19 @@ + + + + node-canvas + + + + +

node-canvas

+ +

+ The tests below assert visual and api integrity by running the exact same code utilizing the client canvas api, as well as node-canvas. +

+ + + + + + diff --git a/test/public/app.js b/test/public/app.js index f356f3b..ff53f4a 100644 --- a/test/public/app.js +++ b/test/public/app.js @@ -1,145 +1,55 @@ +window.addEventListener('load', runTests) -function log() { - if (window.console) console.log.apply(this, arguments); -} - -window.onload = function(){ - runTests(); - get('run').addEventListener('click', runTests, false); -}; +function create (type, attrs, children) { + const element = Object.assign(document.createElement(type), attrs) -document.addEventListener('keypress', function(event){ - if (114 == event.charCode) runTests(); -}, false); - -function get(id) { - return document.getElementById(id); -} + if (children) { + children.forEach(function (child) { element.appendChild(child) }) + } -function create(type, str) { - var el = document.createElement(type); - if (str) el.appendChild(text(str)); - return el; + return element } -function text(str) { - return document.createTextNode(str); +function pdfLink (name) { + return create('a', { + href: '/pdf?name=' + encodeURIComponent(name), + target: '_blank', + textContent: 'PDF' + }) } -function pdfForm(fn, canvas) { - var form = create('form') - , input = create('input') - , submit = create('input'); - - form.setAttribute('action', '/pdf'); - form.setAttribute('method', 'post'); - form.setAttribute('target', '_blank'); - - input.setAttribute('type', 'hidden'); - input.setAttribute('name', 'json'); - input.setAttribute('value', JSON.stringify({ - fn: fn.toString() - , width: canvas.width - , height: canvas.height - })); +function localRendering (name) { + var canvas = create('canvas', { width: 200, height: 200, title: name }) - submit.setAttribute('type', 'submit'); - submit.setAttribute('value', 'PDF'); + window.tests[name](canvas.getContext('2d'), function () {}) - form.appendChild(input); - form.appendChild(submit); - - return form; + return canvas } -function clearTests() { - var table = get('tests'); - table.removeChild(table.children[1]); +function clearTests () { + var table = document.getElementById('tests') + if (table) document.body.removeChild(table) } -function runTests() { - clearTests(); - var table = get('tests') - , tbody = create('tbody'); - for (var name in tests) { - var fn = tests[name] - , canvas = create('canvas') - , tr = create('tr') - , tds = [create('td'), create('td'), create('td'), create('td')]; - - canvas.width = 200; - canvas.height = 200; - canvas.title = name; +function runTests () { + clearTests() - tds[2].appendChild(canvas); - tds[3].appendChild(create('h3', name)); - tds[3].appendChild(pdfForm(fn, canvas)); + var testNames = Object.keys(window.tests) - tr.appendChild(tds[0]); - tr.appendChild(tds[1]); - tr.appendChild(tds[2]); - tr.appendChild(tds[3]); + var table = create('table', { id: 'tests' }, [ + create('thead', {}, [ + create('th', { textContent: 'node-canvas' }), + create('th', { textContent: 'browser canvas' }), + create('th', { textContent: '' }) + ]), + create('tbody', {}, testNames.map(function (name) { + return create('tr', {}, [ + create('td', {}, [create('img', { src: '/render?name=' + encodeURIComponent(name) })]), + create('td', {}, [localRendering(name)]), + create('td', {}, [create('h3', { textContent: name }), pdfLink(name)]) + ]) + })) + ]) - tbody.appendChild(tr); - table.appendChild(tbody); - runTest(name, canvas, tds[0], tds[1], tds[3]); - } + document.body.appendChild(table) } - -function runTest(name, canvas, dest, jpegDest, stats) { - var fn = tests[name] - , start = new Date; - try { - fn(canvas.getContext('2d'), function(){}); - } catch (err) { - log(err); - } - var duration = new Date - start; - stats.appendChild(create('p', 'browser: ' + duration + 'ms')); - stats.appendChild(create('p', 'fps: ' + (1000 / duration).toFixed(0))); - renderOnServer('/render', name, canvas, function(res){ - if (res.error) { - var p = create('p'); - p.innerText = res.error; - dest.appendChild(p); - } else if (res.data) { - var img = create('img'); - img.src = res.data; - stats.appendChild(create('p', 'node: ' + res.duration + 'ms')); - stats.appendChild(create('p', 'fps: ' + (1000 / res.duration).toFixed(0))); - dest.appendChild(img); - } - }); - renderOnServer('/jpeg', name, canvas, function(res){ - if (res.error) { - var p = create('p'); - p.innerText = res.error; - jpegDest.appendChild(p); - } else if (res.data) { - var img = create('img'); - img.src = res.data; - jpegDest.appendChild(img); - } - }); -} - -function renderOnServer(url, name, canvas, fn) { - var req = new XMLHttpRequest - , json = JSON.stringify({ - fn: tests[name].toString() - , width: canvas.width - , height: canvas.height - }); - req.open('POST', url); - req.setRequestHeader('Content-Type', 'application/json'); - req.onreadystatechange = function(){ - if (4 == req.readyState) { - try { - fn(JSON.parse(req.responseText)); - } catch (err) { - fn({ error: err }); - } - } - }; - req.send(json); -} \ No newline at end of file diff --git a/test/public/style.css b/test/public/style.css index 41be43f..6e4d276 100644 --- a/test/public/style.css +++ b/test/public/style.css @@ -2,38 +2,38 @@ body { padding: 40px 50px; font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; } + p { margin: 15px 5px; } -em { - color: #00C5F7; -} + a { color: #00C5F7; } + canvas, img { padding: 5px; border: 1px solid #eee; } -pre { - height: 200px; - font-size: 12px; - overflow: auto; -} + p.msg { width: 400px; } + #tests { width: 100%; margin-top: 35px; } + table tr td:nth-child(1), table tr td:nth-child(2) { width: 200px; } + table tr td:nth-child(3) { padding: 0 45px; } + table tr td p { margin: 5px 0; -} \ No newline at end of file +} diff --git a/test/public/tests.js b/test/public/tests.js index f0b9f0d..4f24d7a 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -1,2012 +1,2042 @@ +var Image +var imageSrc +var tests = {} + +if (typeof module !== 'undefined' && module.exports) { + module.exports = tests + Image = require('../../').Image + imageSrc = function (filename) { return require('path').join(__dirname, '..', 'fixtures', filename) } +} else { + window.tests = tests + Image = window.Image + imageSrc = function (filename) { return filename } +} -var tests = {}; - -tests['clearRect()'] = function(ctx){ - ctx.fillRect(25,25,100,100); - ctx.clearRect(45,45,60,60); - ctx.fillRect(50,50,50,50); -}; - -tests['strokeRect()'] = function(ctx){ - ctx.fillRect(25,25,100,100); - ctx.clearRect(45,45,60,60); - ctx.strokeRect(50,50,50,50); -}; +tests['clearRect()'] = function (ctx) { + ctx.fillRect(25, 25, 100, 100) + ctx.clearRect(45, 45, 60, 60) + ctx.fillRect(50, 50, 50, 50) +} -tests['fillRect()'] = function(ctx){ +tests['strokeRect()'] = function (ctx) { + ctx.fillRect(25, 25, 100, 100) + ctx.clearRect(45, 45, 60, 60) + ctx.strokeRect(50, 50, 50, 50) +} - function render(level){ - ctx.fillStyle = getPointColour(122,122); - ctx.fillRect(0,0,240,240); - renderLevel(level,81,0); +tests['fillRect()'] = function (ctx) { + 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 + return ( + 'rgb(' + Math.round(brightness * 127.5 * (1 - y3d)) + + ',' + Math.round(brightness * 127.5 * (x3d + 1)) + + ',' + Math.round(brightness * 127.5 * (z3d + 1)) + + ')' + ) } - render(1); -}; + render(1) +} -tests['lineTo()'] = function(ctx){ +tests['lineTo()'] = function (ctx) { // Filled triangle - ctx.beginPath(); - ctx.moveTo(25.5,25); - ctx.lineTo(105,25); - ctx.lineTo(25,105); - ctx.fill(); + ctx.beginPath() + ctx.moveTo(25.5, 25) + ctx.lineTo(105, 25) + ctx.lineTo(25, 105) + ctx.fill() // Stroked triangle - ctx.beginPath(); - ctx.moveTo(125,125); - ctx.lineTo(125,45); - ctx.lineTo(45,125); - ctx.closePath(); - ctx.stroke(); -}; - -tests['arc()'] = function(ctx){ - ctx.beginPath(); - ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle - ctx.moveTo(110,75); - ctx.arc(75,75,35,0,Math.PI,false); // Mouth - ctx.moveTo(65,65); - ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye - ctx.moveTo(95,65); - ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye - ctx.stroke(); -}; - -tests['arc() 2'] = function(ctx){ - for(var i=0;i<4;i++){ - for(var j=0;j<3;j++){ - ctx.beginPath(); - var x = 25+j*50; // x coordinate - var y = 25+i*50; // y coordinate - var radius = 20; // Arc radius - var startAngle = 0; // Starting point on circle - var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle - var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise - - ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise); - - if (i>1){ - ctx.fill(); + ctx.beginPath() + ctx.moveTo(125, 125) + ctx.lineTo(125, 45) + ctx.lineTo(45, 125) + ctx.closePath() + ctx.stroke() +} + +tests['arc()'] = function (ctx) { + ctx.beginPath() + ctx.arc(75, 75, 50, 0, Math.PI * 2, true) // Outer circle + ctx.moveTo(110, 75) + ctx.arc(75, 75, 35, 0, Math.PI, false) // Mouth + ctx.moveTo(65, 65) + ctx.arc(60, 65, 5, 0, Math.PI * 2, true) // Left eye + ctx.moveTo(95, 65) + ctx.arc(90, 65, 5, 0, Math.PI * 2, true) // Right eye + ctx.stroke() +} + +tests['arc() 2'] = function (ctx) { + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.beginPath() + var x = 25 + j * 50 // x coordinate + var y = 25 + i * 50 // y coordinate + var radius = 20 // Arc radius + var startAngle = 0 // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) / 2 // End point on circle + var anticlockwise = (i % 2) === 1 // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) + + if (i > 1) { + ctx.fill() } else { - ctx.stroke(); + ctx.stroke() } } } -}; - -tests['arcTo()'] = function(ctx){ - ctx.fillStyle = '#08C8EE'; - ctx.translate(-50,-50); - ctx.moveTo(120, 100); - ctx.lineTo(180, 100); - ctx.arcTo(200, 100, 200, 120, 5); - ctx.lineTo(200, 180); - ctx.arcTo(200, 200, 180, 200, 20); - ctx.lineTo(120, 200); - ctx.arcTo(100, 200, 100, 180, 20); - ctx.lineTo(100, 120); - ctx.arcTo(100, 100, 120, 100, 20); - ctx.fill(); - - ctx.font = 'bold 25px Arial'; - ctx.fillStyle = '#fff'; - ctx.fillText('node', 120, 155); -}; - -tests['bezierCurveTo()'] = function(ctx){ - ctx.beginPath(); - ctx.moveTo(75,40); - ctx.bezierCurveTo(75,37,70,25,50,25); - ctx.bezierCurveTo(20,25,20,62.5,20,62.5); - ctx.bezierCurveTo(20,80,40,102,75,120); - ctx.bezierCurveTo(110,102,130,80,130,62.5); - ctx.bezierCurveTo(130,62.5,130,25,100,25); - ctx.bezierCurveTo(85,25,75,37,75,40); - ctx.fill(); -}; - -tests['quadraticCurveTo()'] = function(ctx){ - ctx.beginPath(); - ctx.moveTo(75,25); - ctx.quadraticCurveTo(25,25,25,62.5); - ctx.quadraticCurveTo(25,100,50,100); - ctx.quadraticCurveTo(50,120,30,125); - ctx.quadraticCurveTo(60,120,65,100); - ctx.quadraticCurveTo(125,100,125,62.5); - ctx.quadraticCurveTo(125,25,75,25); - ctx.stroke(); -}; - - -tests['transform()'] = function(ctx){ - var sin = Math.sin(Math.PI/6); - var cos = Math.cos(Math.PI/6); - ctx.translate(100, 100); - ctx.scale(.5,.5); - var c = 0; - for (var i=0; i <= 12; i++) { - c = Math.floor(255 / 12 * i); - ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; - ctx.fillRect(0, 0, 100, 10); - ctx.transform(cos, sin, -sin, cos, 0, 0); +} + +tests['arcTo()'] = function (ctx) { + ctx.fillStyle = '#08C8EE' + ctx.translate(-50, -50) + ctx.moveTo(120, 100) + ctx.lineTo(180, 100) + ctx.arcTo(200, 100, 200, 120, 5) + ctx.lineTo(200, 180) + ctx.arcTo(200, 200, 180, 200, 20) + ctx.lineTo(120, 200) + ctx.arcTo(100, 200, 100, 180, 20) + ctx.lineTo(100, 120) + ctx.arcTo(100, 100, 120, 100, 20) + ctx.fill() + + ctx.font = 'bold 25px Arial' + ctx.fillStyle = '#fff' + ctx.fillText('node', 120, 155) +} + +tests['bezierCurveTo()'] = function (ctx) { + ctx.beginPath() + ctx.moveTo(75, 40) + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25) + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5) + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120) + ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5) + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25) + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40) + ctx.fill() +} + +tests['quadraticCurveTo()'] = function (ctx) { + ctx.beginPath() + ctx.moveTo(75, 25) + ctx.quadraticCurveTo(25, 25, 25, 62.5) + ctx.quadraticCurveTo(25, 100, 50, 100) + ctx.quadraticCurveTo(50, 120, 30, 125) + ctx.quadraticCurveTo(60, 120, 65, 100) + ctx.quadraticCurveTo(125, 100, 125, 62.5) + ctx.quadraticCurveTo(125, 25, 75, 25) + ctx.stroke() +} + +tests['transform()'] = function (ctx) { + var sin = Math.sin(Math.PI / 6) + var cos = Math.cos(Math.PI / 6) + ctx.translate(100, 100) + ctx.scale(0.5, 0.5) + var c = 0 + for (var i = 0; i <= 12; i++) { + c = Math.floor(255 / 12 * i) + ctx.fillStyle = 'rgb(' + c + ',' + c + ',' + c + ')' + ctx.fillRect(0, 0, 100, 10) + ctx.transform(cos, sin, -sin, cos, 0, 0) } -}; - -tests['rotate()'] = function(ctx){ - ctx.rotate(0.4); - ctx.translate(30,0); - ctx.rect(0,0,50,50); - ctx.stroke(); -}; - -tests['rotate() 2'] = function(ctx){ - ctx.translate(75,75); - - for (var i=1;i<6;i++){ // Loop through rings (from inside to out) - ctx.save(); - ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; - - for (var j=0;j20000) break; - var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) - var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) - ctx.lineTo(x2,y2); - x1 = x2; - y1 = y2; - i++; - } while (x2 != R-O && y2 != 0 ); - ctx.stroke(); + if (i > 20000) break + var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72)) + var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72)) + ctx.lineTo(x2, y2) + x1 = x2 + y1 = y2 + i++ + } while (x2 !== R - O && y2 !== 0) + ctx.stroke() } -}; +} -tests['scale()'] = function(ctx){ - ctx.strokeStyle = "#fc0"; - ctx.lineWidth = 1.5; - ctx.fillRect(0,0,300,300); +tests['scale()'] = function (ctx) { + ctx.strokeStyle = '#fc0' + ctx.lineWidth = 1.5 + ctx.fillRect(0, 0, 300, 300) // Uniform scaling ctx.save() - ctx.translate(50,50); - drawSpirograph(ctx,22,6,5); // no scaling + ctx.translate(50, 50) + drawSpirograph(ctx, 22, 6, 5) // no scaling - ctx.translate(100,0); - ctx.scale(0.75,0.75); - drawSpirograph(ctx,22,6,5); + ctx.translate(100, 0) + ctx.scale(0.75, 0.75) + drawSpirograph(ctx, 22, 6, 5) - ctx.translate(133.333,0); - ctx.scale(0.75,0.75); - drawSpirograph(ctx,22,6,5); - ctx.restore(); + ctx.translate(133.333, 0) + ctx.scale(0.75, 0.75) + drawSpirograph(ctx, 22, 6, 5) + ctx.restore() // Non-uniform scaling (y direction) - ctx.strokeStyle = "#0cf"; + ctx.strokeStyle = '#0cf' ctx.save() - ctx.translate(50,150); - ctx.scale(1,0.75); - drawSpirograph(ctx,22,6,5); + ctx.translate(50, 150) + ctx.scale(1, 0.75) + drawSpirograph(ctx, 22, 6, 5) - ctx.translate(100,0); - ctx.scale(1,0.75); - drawSpirograph(ctx,22,6,5); + ctx.translate(100, 0) + ctx.scale(1, 0.75) + drawSpirograph(ctx, 22, 6, 5) - ctx.translate(100,0); - ctx.scale(1,0.75); - drawSpirograph(ctx,22,6,5); - ctx.restore(); + ctx.translate(100, 0) + ctx.scale(1, 0.75) + drawSpirograph(ctx, 22, 6, 5) + ctx.restore() // Non-uniform scaling (x direction) - ctx.strokeStyle = "#cf0"; + ctx.strokeStyle = '#cf0' ctx.save() - ctx.translate(50,250); - ctx.scale(0.75,1); - drawSpirograph(ctx,22,6,5); - - ctx.translate(133.333,0); - ctx.scale(0.75,1); - drawSpirograph(ctx,22,6,5); - - ctx.translate(177.777,0); - ctx.scale(0.75,1); - drawSpirograph(ctx,22,6,5); - ctx.restore(); - function drawSpirograph(ctx,R,r,O){ - var x1 = R-O; - var y1 = 0; - var i = 1; - ctx.beginPath(); - ctx.moveTo(x1,y1); + ctx.translate(50, 250) + ctx.scale(0.75, 1) + drawSpirograph(ctx, 22, 6, 5) + + ctx.translate(133.333, 0) + ctx.scale(0.75, 1) + drawSpirograph(ctx, 22, 6, 5) + + ctx.translate(177.777, 0) + ctx.scale(0.75, 1) + drawSpirograph(ctx, 22, 6, 5) + ctx.restore() + function drawSpirograph (ctx, R, r, O) { + var x1 = R - O + var y1 = 0 + var i = 1 + ctx.beginPath() + ctx.moveTo(x1, y1) do { - if (i>20000) break; - var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) - var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) - ctx.lineTo(x2,y2); - x1 = x2; - y1 = y2; - i++; - } while (x2 != R-O && y2 != 0 ); - ctx.stroke(); + if (i > 20000) break + var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72)) + var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72)) + ctx.lineTo(x2, y2) + x1 = x2 + y1 = y2 + i++ + } while (x2 !== R - O && y2 !== 0) + ctx.stroke() } -}; - -tests['rect()'] = function(ctx){ - ctx.rect(5,5,50,50); - ctx.strokeStyle = 'yellow'; - ctx.fill(); - ctx.stroke(); -}; - -tests['clip()'] = function(ctx){ - ctx.arc(50,50,50,0,Math.PI * 2,false); - ctx.stroke(); - ctx.clip(); - ctx.fillStyle = 'rgba(0,0,0,.5)'; - ctx.fillRect(0,0,100,100); -}; - -tests['clip() 2'] = function(ctx){ - ctx.fillRect(0,0,150,150); - ctx.translate(75,75); +} + +tests['rect()'] = function (ctx) { + ctx.rect(5, 5, 50, 50) + ctx.strokeStyle = 'yellow' + ctx.fill() + ctx.stroke() +} + +tests['clip()'] = function (ctx) { + ctx.arc(50, 50, 50, 0, Math.PI * 2, false) + ctx.stroke() + ctx.clip() + ctx.fillStyle = 'rgba(0,0,0,.5)' + ctx.fillRect(0, 0, 100, 100) +} + +tests['clip() 2'] = function (ctx) { + ctx.fillRect(0, 0, 150, 150) + ctx.translate(75, 75) // Create a circular clipping path - ctx.beginPath(); - ctx.arc(0,0,60,0,Math.PI*2,true); - ctx.clip(); + ctx.beginPath() + ctx.arc(0, 0, 60, 0, Math.PI * 2, true) + ctx.clip() // draw background - var lingrad = ctx.createLinearGradient(0,-75,0,75); - lingrad.addColorStop(0, '#232256'); - lingrad.addColorStop(1, '#143778'); + var lingrad = ctx.createLinearGradient(0, -75, 0, 75) + lingrad.addColorStop(0, '#232256') + lingrad.addColorStop(1, '#143778') - ctx.fillStyle = lingrad; - ctx.fillRect(-75,-75,150,150); + ctx.fillStyle = lingrad + ctx.fillRect(-75, -75, 150, 150) // draw stars - for (var j=1;j<50;j++){ - ctx.save(); - ctx.fillStyle = '#fff'; - ctx.translate(75-Math.floor(Math.random()*150), - 75-Math.floor(Math.random()*150)); - drawStar(ctx,Math.floor(Math.random()*4)+2); - ctx.restore(); + for (var j = 1; j < 50; j++) { + ctx.save() + ctx.fillStyle = '#fff' + ctx.translate(75 - Math.floor(Math.random() * 150), + 75 - Math.floor(Math.random() * 150)) + drawStar(ctx, Math.floor(Math.random() * 4) + 2) + ctx.restore() } - function drawStar(ctx,r){ - ctx.save(); + function drawStar (ctx, r) { + ctx.save() ctx.beginPath() - ctx.moveTo(r,0); - for (var i=0;i<9;i++){ - ctx.rotate(Math.PI/5); - if(i%2 == 0) { - ctx.lineTo((r/0.525731)*0.200811,0); + ctx.moveTo(r, 0) + for (var i = 0; i < 9; i++) { + ctx.rotate(Math.PI / 5) + if ((i % 2) === 0) { + ctx.lineTo((r / 0.525731) * 0.200811, 0) } else { - ctx.lineTo(r,0); + ctx.lineTo(r, 0) } } - ctx.closePath(); - ctx.fill(); - ctx.restore(); + ctx.closePath() + ctx.fill() + ctx.restore() } -}; +} -tests['createLinearGradient()'] = function(ctx){ - 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'); +tests['createLinearGradient()'] = function (ctx) { + 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)') - ctx.fillStyle = lingrad; - ctx.strokeStyle = lingrad2; + ctx.fillStyle = lingrad + ctx.strokeStyle = lingrad2 - ctx.fillRect(10,10,130,130); - ctx.strokeRect(50,50,50,50); -}; + ctx.fillRect(10, 10, 130, 130) + ctx.strokeRect(50, 50, 50, 50) +} -tests['createRadialGradient()'] = function(ctx){ +tests['createRadialGradient()'] = function (ctx) { // Create gradients - var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); - radgrad.addColorStop(0, '#A7D30C'); - radgrad.addColorStop(0.9, '#019F62'); - radgrad.addColorStop(1, 'rgba(1,159,98,0)'); - - var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); - radgrad2.addColorStop(0, '#FF5F98'); - radgrad2.addColorStop(0.75, '#FF0188'); - radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); - - var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); - radgrad3.addColorStop(0, '#00C9FF'); - radgrad3.addColorStop(0.8, '#00B5E2'); - radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); - - var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); - radgrad4.addColorStop(0, '#F4F201'); - radgrad4.addColorStop(0.8, '#E4C700'); - radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); + var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30) + radgrad.addColorStop(0, '#A7D30C') + radgrad.addColorStop(0.9, '#019F62') + radgrad.addColorStop(1, 'rgba(1,159,98,0)') + + var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50) + radgrad2.addColorStop(0, '#FF5F98') + radgrad2.addColorStop(0.75, '#FF0188') + radgrad2.addColorStop(1, 'rgba(255,1,136,0)') + + var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40) + radgrad3.addColorStop(0, '#00C9FF') + radgrad3.addColorStop(0.8, '#00B5E2') + radgrad3.addColorStop(1, 'rgba(0,201,255,0)') + + var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90) + radgrad4.addColorStop(0, '#F4F201') + radgrad4.addColorStop(0.8, '#E4C700') + radgrad4.addColorStop(1, 'rgba(228,199,0,0)') // draw shapes - ctx.fillStyle = radgrad4; - ctx.fillRect(0,0,150,150); - ctx.fillStyle = radgrad3; - ctx.fillRect(0,0,150,150); - ctx.fillStyle = radgrad2; - ctx.fillRect(0,0,150,150); - ctx.fillStyle = radgrad; - ctx.fillRect(0,0,150,150); -}; - -tests['globalAlpha'] = function(ctx){ - ctx.globalAlpha = 0.5; - ctx.fillStyle = 'rgba(0,0,0,0.5)'; - ctx.strokeRect(0,0,50,50); - - ctx.globalAlpha = 0.8; - ctx.fillRect(20,20,20,20); - - ctx.fillStyle = 'black'; - ctx.globalAlpha = 1; - ctx.fillRect(25,25,10,10); -}; - -tests['globalAlpha 2'] = function(ctx){ - 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'; - - ctx.globalAlpha = 0.2; - - for (var i=0;i<7;i++){ - ctx.beginPath(); - ctx.arc(75,75,10+10*i,0,Math.PI*2,true); - ctx.fill(); + ctx.fillStyle = radgrad4 + ctx.fillRect(0, 0, 150, 150) + ctx.fillStyle = radgrad3 + ctx.fillRect(0, 0, 150, 150) + ctx.fillStyle = radgrad2 + ctx.fillRect(0, 0, 150, 150) + ctx.fillStyle = radgrad + ctx.fillRect(0, 0, 150, 150) +} + +tests['globalAlpha'] = function (ctx) { + ctx.globalAlpha = 0.5 + ctx.fillStyle = 'rgba(0,0,0,0.5)' + ctx.strokeRect(0, 0, 50, 50) + + ctx.globalAlpha = 0.8 + ctx.fillRect(20, 20, 20, 20) + + ctx.fillStyle = 'black' + ctx.globalAlpha = 1 + ctx.fillRect(25, 25, 10, 10) +} + +tests['globalAlpha 2'] = function (ctx) { + 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' + + ctx.globalAlpha = 0.2 + + for (var i = 0; i < 7; i++) { + ctx.beginPath() + ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true) + ctx.fill() } -}; - -tests['fillStyle'] = function(ctx){ - for (i=0;i<6;i++){ - for (j=0;j<6;j++){ - ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + - Math.floor(255-42.5*j) + ',0)'; - ctx.fillRect(j*25,i*25,25,25); +} + +tests['fillStyle'] = function (ctx) { + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)' + ctx.fillRect(j * 25, i * 25, 25, 25) } } -}; - -tests['strokeStyle'] = function(ctx){ - for (var i=0;i<6;i++){ - for (var j=0;j<6;j++){ - ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + - Math.floor(255-42.5*j) + ')'; - ctx.beginPath(); - ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); - ctx.stroke(); +} + +tests['strokeStyle'] = function (ctx) { + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + + Math.floor(255 - 42.5 * j) + ')' + ctx.beginPath() + ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true) + ctx.stroke() } } -}; - -tests['fill with stroke'] = function(ctx){ - ctx.beginPath(); - ctx.arc(75,75,50,0,Math.PI*2,true); - ctx.fill(); - ctx.closePath(); - ctx.beginPath(); - ctx.fillStyle = 'red'; - ctx.strokeStyle = 'yellow'; - ctx.arc(75,75,30,0,Math.PI*2,true); - ctx.fill(); - ctx.stroke(); -}; - -tests['floating point coordinates'] = function(ctx){ - ctx.lineCap = 'square'; - for (var i=0; i<70; i+=3.05) { - ctx.rect(i+3, 10.5, 0, 130); - ctx.moveTo(i+77, 10.5); - ctx.lineTo(i+77, 140.5); +} + +tests['fill with stroke'] = function (ctx) { + ctx.beginPath() + ctx.arc(75, 75, 50, 0, Math.PI * 2, true) + ctx.fill() + ctx.closePath() + ctx.beginPath() + ctx.fillStyle = 'red' + ctx.strokeStyle = 'yellow' + ctx.arc(75, 75, 30, 0, Math.PI * 2, true) + ctx.fill() + ctx.stroke() +} + +tests['floating point coordinates'] = function (ctx) { + ctx.lineCap = 'square' + for (var i = 0; i < 70; i += 3.05) { + ctx.rect(i + 3, 10.5, 0, 130) + ctx.moveTo(i + 77, 10.5) + ctx.lineTo(i + 77, 140.5) } - ctx.stroke(); + ctx.stroke() } -tests['lineWidth'] = function(ctx){ - for (var i = 0; i < 10; i++){ - ctx.lineWidth = 1+i; - ctx.beginPath(); - ctx.moveTo(5+i*14,5); - ctx.lineTo(5+i*14,140); - ctx.stroke(); +tests['lineWidth'] = function (ctx) { + for (var i = 0; i < 10; i++) { + ctx.lineWidth = 1 + i + ctx.beginPath() + ctx.moveTo(5 + i * 14, 5) + ctx.lineTo(5 + i * 14, 140) + ctx.stroke() } -}; - -tests['line caps'] = function(ctx){ - var lineCap = ['butt','round','square']; - - ctx.strokeStyle = '#09f'; - ctx.beginPath(); - ctx.moveTo(10,10); - ctx.lineTo(140,10); - ctx.moveTo(10,140); - ctx.lineTo(140,140); - ctx.stroke(); - - ctx.strokeStyle = 'black'; - for (var i=0;i Date: Sat, 29 Oct 2016 13:58:57 +0200 Subject: [PATCH 2/2] Bump dev dependencies --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 7dd6001..4b04a65 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,9 @@ "nan": "^2.3.2" }, "devDependencies": { - "express": "^4.13.2", - "mocha": "*", - "standard": "^7.1.1" + "express": "^4.14.0", + "mocha": "^3.1.2", + "standard": "^8.5.0" }, "engines": { "node": ">=0.10.0"