auto-canvas

Get canvas context which adapted to retina(HD) display

Installation

npm install auto-canvas

Example

1. In your HTML file, put the canvas inside a wrapper and give it an id for later use. Let's assume we put it in a <div>. The canvas will be scaled 100% size of its parent node

<div class="canvas-wrapper">
  <canvas id="canvas-id"></canvas>
</div>

2. In your JS file

import autoCanvas from 'auto-canvas'

const canvasNode = document.querySelector('#canvas-id')

// get 2d context
// const ctx = autoCanvas(canvasNode, '2d')

// get webgl context
// const ctx = autoCanvas(canvasNode, 'webgl')

// auto scale canvas, no context returned, have to get it manually
autoCanvas(canvasNode)

/**
 * the canvas's width and height attr has been modified inside * `autoCanvas`
 * so this line must be after `autoCanvas` is called
 */
const WIDTH = canvasNode.width // scaled width
const HEIGHT = canvasNode.height // scaled height

// do whatever you want with your canvas

API Documentations

Auto scale your canvas

autoCanvas(node, type)

where:

• node is the canvas node
• type is the type of context you want. This is optional, if not provided, the function returns nothing, else returns the context of the canvas

v2 to v3

1. getAutoContext has been renamed to autoCanvas
2. autoCanvas does not return any context except when you set the second parameter.