函数式React+TypeScript中Canvas绘图失败，控制台返回undefined

首先明确：drawImage方法本身没有返回值，所以你赋值给drawImage变量得到undefined是完全正常的，无需纠结这个点，重点解决画布无内容的问题。

导致画布无内容的核心问题及修复方案： #

• Canvas未设置宽高
  通过document.createElement创建的canvas默认宽高为300px×150px，若你的绘制参数超出这个范围，或画布尺寸过小，会导致内容无法显示。需要显式设置canvas的width和heightDOM属性（注意不是CSS样式）。

• 图片加载事件绑定顺序错误
  先设置src再绑定load事件，可能因浏览器缓存导致图片已加载完成时，load事件不会触发，绘制代码从未执行。正确顺序是先绑定load事件，再设置src。

• 未确保Canvas上下文存在
  getContext('2d')可能返回null（如浏览器不支持Canvas），直接使用类型断言存在风险，需先判断上下文是否有效。

• Canvas未添加到DOM（常见遗漏）
  若React组件未将getCanvas返回的canvas元素渲染到页面DOM中，自然看不到任何内容。

修正后的完整代码 #

function getCanvas() {
  const canvas = document.createElement('canvas');
  canvas.setAttribute('id', 'canv1');
  // 根据绘制需求设置画布宽高
  canvas.width = 200;
  canvas.height = 200;
  
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    console.error('Canvas 2D上下文获取失败');
    return canvas;
  }

  const imageObj1 = new Image();
  // 先绑定加载事件
  imageObj1.addEventListener('load', () => {
    // drawImage无返回值，无需赋值
    ctx.drawImage(imageObj1, 33, 71, 104, 124, 21, 20, 87, 104);
    console.log('图片绘制完成');
  });
  // 新增错误处理，排查图片加载失败情况
  imageObj1.addEventListener('error', (err) => {
    console.error('图片加载失败:', err);
  });
  
  // 最后设置图片地址
  imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg';

  return canvas;
}

React组件中使用示例 #

import { useEffect, useRef } from 'react';

function CanvasComponent() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    const canvas = getCanvas();
    containerRef.current.appendChild(canvas);
    
    // 组件卸载时清理画布
    return () => {
      containerRef.current?.removeChild(canvas);
    };
  }, []);

  return <div ref={containerRef}></div>;
}

export default CanvasComponent;

内容的提问来源于stack exchange，提问作者Tousif Habib