Canvas is great for high performance graphics rendering but by default the results look blocky on phones tablets and laptops with high pixel density or Retina displays. By using canvas width and height attributes and style props we can use window.devicePixelRatio to create a canvas that is responsive to pixel ratio.

It's much faster to paint graphics to the screen using canvas and DOM. But on high pixel density displays, like phones and Macbooks, the results look pixelated. This is because by default one canvas pixel equals one CSS pixel, not one screen pixel.

To fix this, let's create a scale factor from the device pixel ratio. We use a scale factors to create a canvas, use width and height attributes, so double the CSS pixel width and height sizes we require. We make all our painting calls relative to the scale factor.

const canvas = document.querySelector('canvas')
const sf = window.devicePixelRatio
const elWidth = canvas.width
const elHeight = canvas.height
canvas.width = elWidth * sf
canvas.height = elHeight * sf
const ctx = canvas.getContext('2d')
ctx.arc(
canvas.width / 2,
canvas.height / 2,
canvas.width / 2,
0,
Math.PI * 2
)
ctx.fill()
canvas.style.width = `${elWidth}px`

To recap, the width and height attributes on the canvas element determine the number of pixels in the canvas, while the CSS width and height properties determine the size it will display on the screen. By setting an element's attributes different to the CSS properties.

[Canvas] Make Canvas Responsive to Pixel Ratio的更多相关文章

  1. canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  4. [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  6. Canvas名侦探柯南-canvas练习

    var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); / ...

  7. Device Pixel Ratio & Media Queries

    一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...

  8. 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

    其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢?   原理  简单易懂  源码疑问 ...

  9. dpr——设备像素比(device pixel ratio)

    设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...

随机推荐

  1. SeleniumIDE与eclipse如何连接使用

    [秦菲]SeleniumIDE与eclipse如何连接使用 1. 打开Firefox,利用IDE录制脚本(依次点击浏览器界面:工具->Selenium IDE)2. 把录制好的脚本转换成其他语言 ...

  2. Tableau学习笔记之五

    计算用户自定义字段,虽然在Tableau软件中已经加入了很多的数值操作运算,比如平均值,最大值等,但是可以自定义自己需要的数值操作运算. 数值操作可以有以下:预定义函数,百分比,总计,分级等等 1.直 ...

  3. log4net 动态设定日志文件名

    参考文章: http://blog.csdn.net/haoxiaozigang1/article/details/16343303 通过这个篇文章的方法,只能修改文件的路径,文件名并没有修改 参考文 ...

  4. bzoj 2132 圈地计划(黑白染色,最小割)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2132 [题意] 给定n*m个区域,建工业区价值A,建商业区价值B,如果(i,j)有k个 ...

  5. CentOS6 搭建git

    rpm -qa | grep zlib-devel  查看是否安装过 ----------------------------------------------------------------- ...

  6. matlab特征值分解和奇异值分解

    特征值分解 函数 eig 格式 d = eig(A)         %求矩阵A的特征值d,以向量形式存放d. d = eig(A,B)       %A.B为方阵,求广义特征值d,以向量形式存放d. ...

  7. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇06:计分》

    6.计分 计分概述: 分值计量直接反应玩家在游戏中获得的成就感.因此,计分系统在游戏中显得尤为重要,有的反应在直接获取的分数上,有的反应在杀敌数量上等. 计分原理: 原理图,如图6-1所示. 图6-1 ...

  8. SCAU 07校赛 10317 Fans of Footbal Teams

    10317 Fans of Footbal Teams 时间限制:1000MS  内存限制:65535K 题型: 编程题   语言: 无限制 Description Two famous footba ...

  9. C# 6.0 的新特性

    1. 自动的属性初始化器Auto Property initialzier 之前的方式: public class AutoPropertyBeforeCsharp6 { private string ...

  10. 您需要来自administrators的权限才能对此文件进行更改

    今天我重装了系统,以前D盘里的一个文件夹想删除,可以一直没法删除,原先它提示"您需要来自 S-1-5-21-602162358-1284227242-682003330-500 的权限才能对 ...