13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/test/HTMLCanvasElementTests.js:
--------------------------------------------------------------------------------
1 | module('HTMLCanvasElement Tests', {
2 | setup: function() {
3 | window.devicePixelRatio = 2;
4 | }
5 | });
6 |
7 | test('canvas dimensions scale to device pixel ratio', function() {
8 | var canvas = document.getElementById('test_canvas'),
9 | context;
10 |
11 | canvas.height = 100;
12 | canvas.width = 200;
13 |
14 | context = canvas.getContext('2d');
15 |
16 | equal(canvas.height, 200);
17 | equal(canvas.width, 400);
18 |
19 | equal(canvas.style.height, '100px');
20 | equal(canvas.style.width, '200px');
21 | });
22 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright 2013 Jonathan D. Johnson
2 |
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 |
7 | http://www.apache.org/licenses/LICENSE-2.0
8 |
9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hidpi-canvas",
3 | "version": "1.0.10",
4 | "homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill",
5 | "authors": [
6 | "Jonathan Johnson "
7 | ],
8 | "description": "A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.",
9 | "keywords": [
10 | "canvas",
11 | "retina",
12 | "hidpi",
13 | "polyfill"
14 | ],
15 | "main": "dist/hidpi-canvas.js",
16 | "license": "Apache-2.0",
17 | "ignore": [
18 | "**/.*",
19 | "node_modules",
20 | "bower_components",
21 | "src",
22 | "test",
23 | "tests"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/CHANGELOG:
--------------------------------------------------------------------------------
1 | = 1.0.10
2 | * Fixed iOS 10 API deprication (#17)
3 | * Add Travis CI
4 | * Include minified build in release
5 |
6 | = 1.0.9
7 | * True fix for issue with lineWidth handling in stroke (#14)
8 |
9 | = 1.0.8 (broken)
10 | * Fix issue with lineWidth handling in stroke (#14)
11 |
12 | = 1.0.7
13 | * Better fix for pixel ratio being 1
14 |
15 | = 1.0.6
16 | * Performance improvement, early bail if pixel ratio is 1 (#13)
17 |
18 | = 1.0.5
19 | * Correct bower file with "main" entry
20 | * Add `createLinearGradient` support
21 |
22 | = 1.0.3
23 | * Add bower support
24 | * Add built distribution files to the repository
25 |
26 | = 1.0.2
27 | * Fix bug with font scaling with multiple text calls (Issue #4)
28 | * Add a few tests
29 |
30 | = 1.0.1
31 | * Fixed Bug detecting the webkit backingStore
32 | * General code cleanup
33 |
34 | = 1.0.0
35 | * Initial Release
36 |
--------------------------------------------------------------------------------
/src/HTMLCanvasElement.js:
--------------------------------------------------------------------------------
1 | (function(prototype) {
2 | prototype.getContext = (function(_super) {
3 | return function(type) {
4 | var backingStore, ratio,
5 | context = _super.call(this, type);
6 |
7 | if (type === '2d') {
8 |
9 | backingStore = context.backingStorePixelRatio ||
10 | context.webkitBackingStorePixelRatio ||
11 | context.mozBackingStorePixelRatio ||
12 | context.msBackingStorePixelRatio ||
13 | context.oBackingStorePixelRatio ||
14 | context.backingStorePixelRatio || 1;
15 |
16 | ratio = (window.devicePixelRatio || 1) / backingStore;
17 |
18 | if (ratio > 1) {
19 | this.style.height = this.height + 'px';
20 | this.style.width = this.width + 'px';
21 | this.width *= ratio;
22 | this.height *= ratio;
23 | }
24 | }
25 |
26 | return context;
27 | };
28 | })(prototype.getContext);
29 | })(HTMLCanvasElement.prototype);
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hidpi-canvas",
3 | "description": "A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.",
4 | "version": "1.0.10",
5 | "license": "Apache-2.0",
6 | "homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill",
7 | "bugs": "https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues",
8 | "repository": {
9 | "type": "git",
10 | "url": "git@github.com:jondavidjohn/hidpi-canvas-polyfill.git"
11 | },
12 | "author": "Jonathan D. Johnson (http://jondavidjohn.com)",
13 | "devDependencies": {
14 | "grunt": "0.4.1",
15 | "grunt-cli": "0.1.9",
16 | "grunt-contrib-concat": "0.3.0",
17 | "grunt-contrib-clean": "0.5.0",
18 | "grunt-contrib-compress": "0.5.2",
19 | "grunt-contrib-uglify": "0.2.4",
20 | "grunt-contrib-watch": "0.5.3",
21 | "grunt-contrib-qunit": "0.2.2",
22 | "qunit-assert-canvas": "1.0.1"
23 | },
24 | "scripts": {
25 | "test": "grunt",
26 | "watch": "grunt watch",
27 | "build": "grunt dist",
28 | "prepublish": "npm run build"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/test/CanvasRenderingContext2DTests.js:
--------------------------------------------------------------------------------
1 | module('CanvasRenderingContext2D Tests', {
2 | setup: function() {
3 | window.devicePixelRatio = 2;
4 | }
5 | });
6 |
7 | test('the font size remains unchanged after every text call', function() {
8 | var font_value = '12px Helvetica',
9 | canvas = document.getElementById('test_canvas'),
10 | context = canvas.getContext('2d');
11 |
12 | context.font = font_value;
13 |
14 | context.fillText("Some Text",10,300);
15 | equal(context.font, font_value);
16 |
17 | context.fillText("Some More Text",10,450);
18 | equal(context.font, font_value);
19 | });
20 |
21 | test('the lineWidth property remains unchanged after every stroke call', function() {
22 | var line_width_value = 12,
23 | canvas = document.getElementById('test_canvas'),
24 | context = canvas.getContext('2d');
25 |
26 | context.lineWidth = line_width_value;
27 |
28 | context.moveTo(250,150);
29 | context.arcTo(350,50,350,100,50);
30 | context.stroke();
31 | equal(context.lineWidth, line_width_value);
32 |
33 | context.moveTo(10,15);
34 | context.arcTo(30,50,30,10,50);
35 | context.stroke();
36 | equal(context.lineWidth, line_width_value);
37 | });
38 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # How to Contribute
2 |
3 | Yay, you're interested in helping this thing suck less. Good for you!
4 |
5 | Some things you should be familiar with before getting started
6 |
7 | - Unit testing (with [QUnit](http://qunitjs.com))
8 | - [Grunt](http://gruntjs.org)
9 | - [Node/NPM](https://npmjs.org/) (available via homebrew)
10 |
11 | ## Project Layout
12 |
13 | - `src/` - Coffeescript Source files
14 | - `dist/` - Compiled, Concatinated, and Minified
15 | - `test/` - Unit Testing Resources
16 |
17 |
18 | ## Development
19 |
20 | Once you have npm installed, clone the repository (with `--recursive` to also clone all submodules) and install all dependencies
21 |
22 | git clone git@.....hidpi-canvas-polyfill.git --recursive
23 | cd hidpi-canvas-polyfill
24 | npm install
25 |
26 | Then to build a distribution run
27 |
28 | npm run build
29 |
30 | This will generate the compiled (and minified) sourc in your `dist/` directory
31 | along with a distributable zip archive.
32 |
33 | Any time you change any of the `src/**/*.js` files you'll
34 | need to re-run this command.
35 |
36 | You can also use
37 |
38 | npm run watch
39 |
40 | to automatically reconcat the unminified file everytime you
41 | change any of the `src/**/*.js` files.
42 |
43 | ## Testing
44 |
45 | ### Writing Tests
46 |
47 | The `test/` directory mirrors the `src/` directory for test organization, make
48 | sure to organize and produce tests that fit the patterns present.
49 |
50 | ### Running Tests
51 |
52 | npm test
53 |
54 | ## On Contribution
55 |
56 | ### Be a Chameleon
57 |
58 | Try your best to follow the present code formatting and patterns in place.
59 |
60 | ### Pull Requests
61 |
62 | **Make sure to send pull requests to develop.**
63 |
64 | Good Pull Requests include:
65 |
66 | - A clear explaination of the problem (or enhancement)
67 | - Clean commit history (squash where it makes sense)
68 | - Relevant Tests (either updated and/or new)
69 |
70 | # TODO
71 |
72 | A few things it currently lacks that I'd like to see improved
73 |
74 | - More complete canvas context method coverage.
75 | - Figure out how to test this stuff.
76 |
--------------------------------------------------------------------------------
/dist/hidpi-canvas.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * HiDPI Canvas Polyfill (1.0.10)
3 | *
4 | * Author: Jonathan D. Johnson (http://jondavidjohn.com)
5 | * Homepage: https://github.com/jondavidjohn/hidpi-canvas-polyfill
6 | * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues
7 | * License: Apache-2.0
8 | */
9 | !function(a){var b=function(){var a=document.createElement("canvas"),b=a.getContext("2d"),c=b.backingStorePixelRatio||b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/c}(),c=function(a,b){for(var c in a)a.hasOwnProperty(c)&&b(a[c],c)},d={fillRect:"all",clearRect:"all",strokeRect:"all",moveTo:"all",lineTo:"all",arc:[0,1,2],arcTo:"all",bezierCurveTo:"all",isPointinPath:"all",isPointinStroke:"all",quadraticCurveTo:"all",rect:"all",translate:"all",createRadialGradient:"all",createLinearGradient:"all"};1!==b&&(c(d,function(c,d){a[d]=function(a){return function(){var d,e,f=Array.prototype.slice.call(arguments);if("all"===c)f=f.map(function(a){return a*b});else if(Array.isArray(c))for(d=0,e=c.length;e>d;d++)f[c[d]]*=b;return a.apply(this,f)}}(a[d])}),a.stroke=function(a){return function(){this.lineWidth*=b,a.apply(this,arguments),this.lineWidth/=b}}(a.stroke),a.fillText=function(a){return function(){var c=Array.prototype.slice.call(arguments);c[1]*=b,c[2]*=b,this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c*b+d}),a.apply(this,c),this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c/b+d})}}(a.fillText),a.strokeText=function(a){return function(){var c=Array.prototype.slice.call(arguments);c[1]*=b,c[2]*=b,this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c*b+d}),a.apply(this,c),this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c/b+d})}}(a.strokeText))}(CanvasRenderingContext2D.prototype),function(a){a.getContext=function(a){return function(b){var c,d,e=a.call(this,b);return"2d"===b&&(c=e.backingStorePixelRatio||e.webkitBackingStorePixelRatio||e.mozBackingStorePixelRatio||e.msBackingStorePixelRatio||e.oBackingStorePixelRatio||e.backingStorePixelRatio||1,d=(window.devicePixelRatio||1)/c,d>1&&(this.style.height=this.height+"px",this.style.width=this.width+"px",this.width*=d,this.height*=d)),e}}(a.getContext)}(HTMLCanvasElement.prototype);
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | HiDPI Canvas Example
6 |
11 |
12 |
13 |
14 |
15 |
83 |
84 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function (grunt) {
2 | grunt.initConfig({
3 | pkg: grunt.file.readJSON('package.json'),
4 |
5 | clean: [
6 | 'lib/**/*',
7 | 'dist/**/*',
8 | '!lib/.gitignore',
9 | '!dist/.gitignore',
10 | ],
11 |
12 | concat: {
13 | options: {
14 | banner: '/**\n'
15 | + ' * HiDPI Canvas Polyfill (<%= pkg.version %>)\n'
16 | + ' *\n'
17 | + ' * Author: <%= pkg.author %>\n'
18 | + ' * Homepage: <%= pkg.homepage %>\n'
19 | + ' * Issue Tracker: <%= pkg.bugs %>\n'
20 | + ' * License: <%= pkg.license %>\n'
21 | + '*/\n',
22 | separator: ';'
23 | },
24 | dist: {
25 | src: ['src/**/*.js'],
26 | dest: 'dist/hidpi-canvas.js'
27 | }
28 | },
29 |
30 | uglify: {
31 | options: {
32 | banner: '<%= concat.options.banner %>'
33 | },
34 | dist: {
35 | files: {
36 | 'dist/hidpi-canvas.min.js': ['<%= concat.dist.dest %>']
37 | }
38 | }
39 | },
40 |
41 | compress: {
42 | main:{
43 | options: {
44 | mode: 'gzip'
45 | },
46 | expand: true,
47 | cwd: 'dist',
48 | src: ['*.js'],
49 | dest: 'dist/'
50 | },
51 | dist: {
52 | options: {
53 | archive: 'dist/hidpi-canvas-<%= pkg.version %>.zip',
54 | level: 9
55 | },
56 | files: [
57 | {
58 | src: [
59 | 'LICENSE.txt',
60 | 'README.md',
61 | 'CHANGELOG'
62 | ]
63 | },
64 | {
65 | expand: true,
66 | cwd: 'dist/',
67 | src: [
68 | '*.js',
69 | '*.js.gz'
70 | ]
71 | }
72 | ]
73 | },
74 | },
75 |
76 | qunit: {
77 | files: [
78 | 'test/CanvasRenderingContext2D.html',
79 | 'test/HTMLCanvasElement.html'
80 | ]
81 | },
82 |
83 | watch: {
84 | files: ['<%= concat.dist.src %>'],
85 | tasks: ['clean', 'concat:dist']
86 | }
87 | });
88 |
89 | // Load Package Tasks
90 | grunt.loadNpmTasks('grunt-contrib-clean');
91 | grunt.loadNpmTasks('grunt-contrib-concat');
92 | grunt.loadNpmTasks('grunt-contrib-uglify');
93 | grunt.loadNpmTasks('grunt-contrib-compress');
94 | grunt.loadNpmTasks('grunt-contrib-qunit');
95 | grunt.loadNpmTasks('grunt-contrib-watch');
96 |
97 | // Define Custom Tasks
98 | grunt.registerTask('test', ['qunit']);
99 | grunt.registerTask('default', ['clean', 'concat:dist', 'test']);
100 | grunt.registerTask('dist', ['default', 'uglify:dist', 'compress', 'compress:dist']);
101 | };
102 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ---
2 |
3 |
Do you use webpack?
4 |
5 |
6 | Wish your team made reducing the size of your webpack builds a priority? Want to know how the changes you're making impact your asset profile for every pull request?
7 |