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. POJ 1716 Integer Intervals

    题意:给出一些区间,求一个集合的长度要求每个区间里都至少有两个集合里的数. 解法:贪心或者差分约束.贪心的思路很简单,只要将区间按右边界排序,如果集合里最后两个元素都不在当前区间内,就把这个区间内的最 ...

  2. java web 学习九(通过servlet生成验证码图片)

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:

  3. HDU 4911 Inversion

    http://acm.hdu.edu.cn/showproblem.php?pid=4911   归并排序求逆对数. Inversion Time Limit: 2000/1000 MS (Java/ ...

  4. 用javascript 面向对象制作坦克大战(四)

    我们现在还差一个重要的功能,没错,敌人坦克的创建以及子弹击中敌人坦克时的碰撞检测功能. 5.  创建敌人坦克完成炮弹碰撞检测 5.1   创建敌人坦克对象 敌人坦克和玩家坦克一样,同样继承自我们的坦克 ...

  5. uC/OS - III 移植 IAR平台

    关于移植uC/OS-III 网上已经有很多教程了此处只是做个记录 首先下载源码然后解压得到下面的文件: 然后在模版工程里新建各种文件夹: 最后全部都添加进工程: OK了,编译一下,惊呆了,竟然 0错误 ...

  6. 单片机usb转串口的时灵时不灵的解答

    写这篇博客,首先检讨一下自己,因为以前串口的程序,也和步进电机一样,时灵时不灵,我现在终于知道这是为什么了,因为51上有三个串口,一个公口,一个母口,一个usb转串口,这样的话,串口有3个了,我手头上 ...

  7. 通过反汇编C语言小程序学习Liunx汇编语言

    大家好!    我是来自山东师范大学的吴乐.    今天在<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ...

  8. 十字链表 Codeforces Round #367 E Working routine

    // 十字链表 Codeforces Round #367 E Working routine // 题意:给你一个矩阵,q次询问,每次交换两个子矩阵,问最后的矩阵 // 思路:暴力肯定不行.我们可以 ...

  9. Tkinter教程之Button篇(2)

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811300 # Tkinter教程之Button篇(2)'''5.指定Button的宽度与高度 ...

  10. ACM2033

    /**人见人爱A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...