Как получить удаленное изображение для отображения на холсте?

Используйте встроенный объект JavaScript Image.

Вот очень простой пример использования объекта Image:

myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';

Вот более подходящий механизм для вашего сценария из комментариев к этому ответу.

Спасибо, olliej!

Стоит отметить, что вы не можете синхронно запрашивать ресурс, поэтому вы должны сделать что-то вроде:

myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';

Если вы хотите нарисовать изображение на холсте, вам также нужно дождаться загрузки изображения, поэтому правильно будет сделать следующее:

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';

Чтобы добавить изображение в JavaScript, вы можете сделать следующее:

myimage = new Image()
myimage.src='http://....'

Если изображение на вашей странице имеет идентификатор «image1», вы можете назначить источник изображения image1 для myimage.src.

Я обнаружил, что использование прототипов здесь очень полезно. Если вы не знакомы с ними, прототипы являются частью объектов, которые позволяют вам устанавливать для них свои собственные переменные и/или методы.

Делать что-то вроде:

Image.prototype.position = {
    x: 0,
    y: 0
}

Image.prototype.onload = function(){
    context.drawImage(this, this.position.x, this.position.y);
}

позволяет вам установить положение и рисовать на холсте без особых усилий.

Переменная position позволяет перемещать его по холсту.
Таким образом, можно сделать следующее:

var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";

и изображение автоматически отобразится на холсте в точке (20 200).

Prototype работает для всех объектов HTML и собственного Javascript. Так

Array.prototype.sum = function(){
    var _sum = 0.0;
    for (var i=0; i<this.length; i++){
        _sum += parseFloat(this[i]);
    }
    return _sum;
}

дает новую функцию всем массивам.

Однако,

var Bob;
Bob.Prototype.sayHi = function(){
    alert("Hello there.");
}

не будет работать (по многим причинам, но я буду говорить только о прототипах).
Прототип — это своего рода «свойство», которое содержит все ваши свойства/методы, которые вы вводите, и уже есть в каждом HTML-коде. и собственные объекты Javascript (не те, которые вы создаете).
Прототипы также позволяют легко вызывать (вы можете использовать "myImg.position.x" вместо "myImg.prototype.position.x" ).

Кроме того, если вы определяете свою переменную, вы должны делать это примерно так.

var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}

Если вы используете jQuery, вы можете сделать:

$.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');

Вы также можете добавить ширину и все остальное в тег img.