thomasboyt/canvas.js

## canvas.js
const width = 100;
const height = 80;

const sprite = document.getElementById('sprite');

function withCanvas(id, cb) {
  const el = document.getElementById(id);

  if (!el) {
    throw new Error(`no element named ${id}`);
  }

  el.width = width;
  el.height = height;

  ctx = el.getContext('2d');

  cb(el, ctx);

  render(ctx);
}

function render(ctx) {
  ctx.strokeStyle = 'black';
  ctx.strokeRect(0, 0, width, height);

  ctx.fillStyle = 'black';
  ctx.font = '12px Monaco, Consolas, monospace';
  ctx.fillText('hello world', 10, 20)

  ctx.drawImage(sprite, 10, 50);

  ctx.beginPath();
  ctx.arc(75,50,20,0,2*Math.PI);
  ctx.stroke();
}

withCanvas('unscaled', (canvas, ctx) => {
});

withCanvas('css-scaled', (canvas, ctx) => {
  canvas.style.width = '400px';
  canvas.style.height = '320px';
});

withCanvas('css-scaled-pixelated', (canvas, ctx) => {
  canvas.style.width = '400px';
  canvas.style.height = '320px';
  canvas.style.imageRendering = 'pixelated';
});

withCanvas('css-scaled-unsmoothed', (canvas, ctx) => {
  canvas.style.width = '400px';
  canvas.style.height = '320px';
  ctx.imageSmoothingEnabled = false;
});

withCanvas('context-scaled', (canvas, ctx) => {
  canvas.width = 400;
  canvas.height = 320;

  ctx.scale(4, 4);
});

withCanvas('context-scaled-pixelated', (canvas, ctx) => {
  canvas.width = 400;
  canvas.height = 320;
  canvas.style.imageRendering = 'pixelated';

  ctx.scale(4, 4);
});

withCanvas('context-scaled-unsmoothed', (canvas, ctx) => {
  canvas.width = 400;
  canvas.height = 320;
  ctx.imageSmoothingEnabled = false;

  ctx.scale(4, 4);
});

## index.html
<!doctype html>
<html>
  <head>
    <title>Canvas Scaling Demo</title>
  </head>
  <body>
    <h2>Unscaled Canvas</h2>
    <canvas id="unscaled"></canvas>

    <h2>CSS-Scaled Canvas</h2>
    <canvas id="css-scaled"></canvas>

    <h2>CSS-Scaled Canvas With <code>image-rendering: pixelated</code></h2>
    <canvas id="css-scaled-pixelated"></canvas>

    <h2>CSS-Scaled Canvas With <code>imageSmoothingEnabled = false</code></h2>
    <canvas id="css-scaled-unsmoothed"></canvas>

    <h2>Context-Scaled Canvas</h2>
    <canvas id="context-scaled"></canvas>

    <h2>Context-Scaled Canvas With <code>image-rendering: pixelated</code></h2>
    <canvas id="context-scaled-pixelated"></canvas>

    <h2>Context-Scaled Canvas With <code>imageSmoothingEnabled = false</code></h2>
    <canvas id="context-scaled-unsmoothed"></canvas>

    <img src="http://i.imgur.com/aagfuDo.png" id="sprite" style="display: none" />

    <script src="canvas.js"></script>
  </body>
</html>
	const width = 100;
	const height = 80;

	const sprite = document.getElementById('sprite');

	function withCanvas(id, cb) {
	const el = document.getElementById(id);

	if (!el) {
	throw new Error(`no element named ${id}`);
	}

	el.width = width;
	el.height = height;

	ctx = el.getContext('2d');

	cb(el, ctx);

	render(ctx);
	}

	function render(ctx) {
	ctx.strokeStyle = 'black';
	ctx.strokeRect(0, 0, width, height);

	ctx.fillStyle = 'black';
	ctx.font = '12px Monaco, Consolas, monospace';
	ctx.fillText('hello world', 10, 20)

	ctx.drawImage(sprite, 10, 50);

	ctx.beginPath();
	ctx.arc(75,50,20,0,2*Math.PI);
	ctx.stroke();
	}

	withCanvas('unscaled', (canvas, ctx) => {
	});

	withCanvas('css-scaled', (canvas, ctx) => {
	canvas.style.width = '400px';
	canvas.style.height = '320px';
	});

	withCanvas('css-scaled-pixelated', (canvas, ctx) => {
	canvas.style.width = '400px';
	canvas.style.height = '320px';
	canvas.style.imageRendering = 'pixelated';
	});

	withCanvas('css-scaled-unsmoothed', (canvas, ctx) => {
	canvas.style.width = '400px';
	canvas.style.height = '320px';
	ctx.imageSmoothingEnabled = false;
	});

	withCanvas('context-scaled', (canvas, ctx) => {
	canvas.width = 400;
	canvas.height = 320;

	ctx.scale(4, 4);
	});

	withCanvas('context-scaled-pixelated', (canvas, ctx) => {
	canvas.width = 400;
	canvas.height = 320;
	canvas.style.imageRendering = 'pixelated';

	ctx.scale(4, 4);
	});

	withCanvas('context-scaled-unsmoothed', (canvas, ctx) => {
	canvas.width = 400;
	canvas.height = 320;
	ctx.imageSmoothingEnabled = false;

	ctx.scale(4, 4);
	});
	<!doctype html>
	<html>
	<head>
	<title>Canvas Scaling Demo</title>
	</head>
	<body>
	<h2>Unscaled Canvas</h2>
	<canvas id="unscaled"></canvas>

	<h2>CSS-Scaled Canvas</h2>
	<canvas id="css-scaled"></canvas>

	<h2>CSS-Scaled Canvas With <code>image-rendering: pixelated</code></h2>
	<canvas id="css-scaled-pixelated"></canvas>

	<h2>CSS-Scaled Canvas With <code>imageSmoothingEnabled = false</code></h2>
	<canvas id="css-scaled-unsmoothed"></canvas>

	<h2>Context-Scaled Canvas</h2>
	<canvas id="context-scaled"></canvas>

	<h2>Context-Scaled Canvas With <code>image-rendering: pixelated</code></h2>
	<canvas id="context-scaled-pixelated"></canvas>

	<h2>Context-Scaled Canvas With <code>imageSmoothingEnabled = false</code></h2>
	<canvas id="context-scaled-unsmoothed"></canvas>

	<img src="http://i.imgur.com/aagfuDo.png" id="sprite" style="display: none" />

	<script src="canvas.js"></script>
	</body>
	</html>