fix: scale canvas to adapt dpr (#4)

* fix: scale canvas to adapt dpr

小程序在手机端由于 devicePixelRatio，canvas 如果不根据设备 dpr 进行 x2 x3 的渲染会导致糊

https://juejin.cn/post/6982019644169125924
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html#Canvas-2D-%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81

* Update mp.tsx

Co-authored-by: tony chen <tony.zq.chen@gmail.com>

src/lib/mp.tsx

@@ -1,5 +1,5 @@
 import { Canvas } from '@tarojs/components'
-import { createSelectorQuery } from '@tarojs/taro'
+import { createSelectorQuery, getSystemInfoSync } from '@tarojs/taro'
 import lottie from 'lottie-miniprogram'
 import type { AnimatedLottieViewProps } from 'lottie-react-native'
 import React, { Component } from 'react'
@@ -72,8 +72,13 @@ class LottieView extends Component<AnimatedLottieViewProps, LottieViewState> {
           try {
             const canvas = res.node
             const context = canvas.getContext('2d')
-            canvas.width = parseFloat(width)
-            canvas.height = parseFloat(height)
+
+            // scale canvas to adapt dpr
+            const dpr = getSystemInfoSync().pixelRatio
+            canvas.width = parseFloat(width) * dpr
+            canvas.height = parseFloat(height) * dpr
+            context.scale(dpr, dpr)
+
             lottie.setup(canvas)
             this.animation = lottie.loadAnimation({
               animationData: source,