canvasTexture is blurry meanwhile the origin canvas is not

I’m using canvas as a texture to render a plane, but canvasTexutre on the plane is a little blurry. How can I fix that?

enter image description here

import * as THREE from "three";

const image = document.getElementById('origin-img')

/* --- draw 【canvas】 by image--- */
const canvas = document.getElementById('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height)

/* --- threejs scene --- */
const itemWidth = 300
const itemHeight = 300

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(itemWidth / -2, itemWidth / 2, itemHeight / 2, itemHeight / -2, 0, 1000);
camera.position.z = 100;

const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('webgl')
});
renderer.setSize(itemWidth, itemHeight);

// create a plane which uses 【canvas】 as texture
const geometry = new THREE.PlaneGeometry(image.width, image.height, 64, 64);
const material = new THREE.MeshBasicMaterial({
  map: new THREE.CanvasTexture(
    canvas,
    THREE.Texture.DEFAULT_MAPPING,
    THREE.ClampToEdgeWrapping,
    THREE.ClampToEdgeWrapping,
    THREE.LinearFilter,
    THREE.LinearMipmapLinearFilter,
    THREE.RGBAFormat,
    THREE.UnsignedByteType,
    1
  )
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

renderer.render(scene, camera);
<div class="app" style="display: flex; justify-content: space-between; width: 1200px;">
  <div class="item-container">
    <div class="item">
      <img id='origin-img' src="./origin-texture.png">
    </div>
    <div class="caption">Origin Image</div>
  </div>
  <div class="item-container">
    <div class="item">
      <canvas id="canvas"></canvas>
    </div>
    <div class="caption">Draw canvas by image</div>
  </div>
  <div class="item-container">
    <div class="item">
      <canvas id="webgl"></canvas>
    </div>
    <div class="caption">In threejs, create a plane which uses canvas as a texture</div>
  </div>
</div>
<script type="module" src="./index.js"></script>