auto-canvas

auto-canvas

Get canvas context which adapted to retina(HD) display

Installation

npm install auto-canvas

Example

• 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>

• 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

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