编写完整代码，JS中使用canvas实现图文混排，背景为紫色，左边为一张图片右边为两行白色的字体“小朋友观看长颈鹿，大家很开心”

以下是实现图文混排的JS代码：

// 获取canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置画布背景颜色
ctx.fillStyle = '#8B008B';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 加载图片
const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  // 绘制图片
  ctx.drawImage(img, 0, 0, canvas.width / 2, canvas.height);

  // 设置字体样式
  ctx.font = '30px Arial';
  ctx.fillStyle = '#FFFFFF';

  // 绘制文本
  ctx.fillText('小朋友观看长颈鹿', canvas.width / 2 + 20, canvas.height / 2 - 20);
  ctx.fillText('大家很开心', canvas.width / 2 + 20, canvas.height / 2 + 20);
};

需要注意的是，图片需要先加载完成后才能绘制，因此在图片加载完成后再绘制文字。同时，需要设置字体样式和颜色，以及设置文字绘制位置。

相关问题

写出完整代码，使用canvas实现图文混排，效果为背景为紫色，右边一张本地文件里的图片，左边有两行文字

以下是一个简单的示例代码，实现了一个背景紫色，右边一张图片，左边两行文字的图文混排：

HTML代码：

<canvas id="myCanvas" width="500" height="300"></canvas>

JavaScript代码：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 设置背景色为紫色
ctx.fillStyle = "#663399";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 加载图片
const img = new Image();
img.src = "image.jpg";
img.onload = function() {
  // 在画布上绘制图片
  ctx.drawImage(img, canvas.width / 2, 0, canvas.width / 2, canvas.height);

  // 绘制文字
  ctx.fillStyle = "#ffffff";
  ctx.font = "bold 24px Arial";
  ctx.fillText("Hello, World!", 50, 100);
  ctx.fillText("This is a canvas example.", 50, 140);
}

注意，上面的代码中使用了一个本地图片文件 `image.jpg`，需要将其放置在与 HTML 文件相同的目录下，并且需要修改 `img.src` 的路径为图片文件的实际路径。另外，为了更好地显示中文，可以使用中文字体，比如微软雅黑等。