javascript - 如何在javascript中(没有CSS和HTML)在图像上绘制图像

我动态创建HTMLImageElement，并将它们绘制在画布上

var image = new Image();
image.src = 'mypath/image.png';
context.drawImage(image, point.x, point.y); // context is a CanvasRenderingContext2D element

现在，我想在image上绘制另一个图像（较小），并且仍然是动态的。没有CSS或HTML的帮助，有可能吗？

编辑

我不想用另一张图片替换一张图片，而是要重叠两张图片：“背景”中最大的一张和它前面的最小一张。 “上方”旨在作为重叠，也不替换。

最佳答案

只需将drawImage()与resize参数一起使用：

context.drawImage(image, point.x, point.y, wantedWidth, wantedHeight);

图像源可以是image甚至是context本身。

（还请记住在尝试绘制图像元素之前对图像元素使用onload处理程序。）

var ctx = document.querySelector("canvas").getContext("2d"),
    img = new Image;

img.onload = function() {
  ctx.drawImage(this, -200, -200, 800, 800);
  ctx.drawImage(this, 0, 0);
};

img.src = "http://i.imgur.com/RV2a28T.png";

<canvas/>