Canvas drawImage doesn't work without requestAnimationFrame(draw); [duplicate]












-1















This question already has an answer here:




  • CanvasContext2D drawImage() issue [onload and CORS]

    1 answer



  • HTML5 canvas - drawImage not always drawing the image

    1 answer




I'm confused about this:



var cvs = document.getElementById("canvas");

var ctx = cvs.getContext('2d');

var background = new Image();

background.src = "pic/background.jpg";



function draw() {

    ctx.drawImage(background,10,10,100,100);

}



requestAnimationFrame(draw);


The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.






javascript html canvas







share|improve this question















marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 22 at 10:12


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • Try background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)
    – Chris G
    Nov 22 at 9:34












  • Hello and welcome to Stack Overflow. What is your question?
    – cmprogram
    Nov 22 at 9:34
















-1















This question already has an answer here:




  • CanvasContext2D drawImage() issue [onload and CORS]

    1 answer



  • HTML5 canvas - drawImage not always drawing the image

    1 answer




I'm confused about this:



var cvs = document.getElementById("canvas");

var ctx = cvs.getContext('2d');

var background = new Image();

background.src = "pic/background.jpg";



function draw() {

    ctx.drawImage(background,10,10,100,100);

}



requestAnimationFrame(draw);


The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.






javascript html canvas







share|improve this question















marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 22 at 10:12


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • Try background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)
    – Chris G
    Nov 22 at 9:34












  • Hello and welcome to Stack Overflow. What is your question?
    – cmprogram
    Nov 22 at 9:34














-1












-1








-1








This question already has an answer here:




  • CanvasContext2D drawImage() issue [onload and CORS]

    1 answer



  • HTML5 canvas - drawImage not always drawing the image

    1 answer




I'm confused about this:



var cvs = document.getElementById("canvas");

var ctx = cvs.getContext('2d');

var background = new Image();

background.src = "pic/background.jpg";



function draw() {

    ctx.drawImage(background,10,10,100,100);

}



requestAnimationFrame(draw);


The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.






javascript html canvas







share|improve this question
















This question already has an answer here:




  • CanvasContext2D drawImage() issue [onload and CORS]

    1 answer



  • HTML5 canvas - drawImage not always drawing the image

    1 answer




I'm confused about this:



var cvs = document.getElementById("canvas");

var ctx = cvs.getContext('2d');

var background = new Image();

background.src = "pic/background.jpg";



function draw() {

    ctx.drawImage(background,10,10,100,100);

}



requestAnimationFrame(draw);


The code above works. However, if I don't want to use requestAnimationFrame, the Image wouldn't be drawn. My goal is to let the image be shown on canvas by ctx.drawImage(background,10,10,100,100) instead of using function draw or requestAnimationFrame.





This question already has an answer here:




  • CanvasContext2D drawImage() issue [onload and CORS]

    1 answer



  • HTML5 canvas - drawImage not always drawing the image

    1 answer







javascript html canvas




javascript html canvas






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 at 9:42









barbsan

2,14811122




2,14811122










asked Nov 22 at 9:31









Athena Ho

1




1




marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 22 at 10:12


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






marked as duplicate by Durga, Chris G, Kaiido javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 22 at 10:12


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • Try background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)
    – Chris G
    Nov 22 at 9:34












  • Hello and welcome to Stack Overflow. What is your question?
    – cmprogram
    Nov 22 at 9:34


















  • Try background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)
    – Chris G
    Nov 22 at 9:34












  • Hello and welcome to Stack Overflow. What is your question?
    – cmprogram
    Nov 22 at 9:34
















Try background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)
– Chris G
Nov 22 at 9:34






Try background.onload = function() { ctx.drawImage(background,10,10,100,100); }; (you're trying to draw the image before it is loaded; as soon as you set .src the browser loads the image in the background, it won't pause your code)
– Chris G
Nov 22 at 9:34














Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34




Hello and welcome to Stack Overflow. What is your question?
– cmprogram
Nov 22 at 9:34

















active

oldest

votes






















active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes

-

Popular posts from this blog

Sphinx de Gizeh

Image
Pour les articles homonymes, voir Sphinx. Sphinx de Gizeh.mw-parser-output .entete.egypte-antique{background-image:url("//upload.wikimedia.org/wikipedia/commons/c/cc/Picto_infobox_ancient_Egypt.png")} Site d'Égypte antique Le visage du sphinx de Gizeh. Noms en arabe أبو الهول , Abou al-Hôl Localisation Région Basse-Égypte Coordonnées 29° 58′ 31″ nord, 31° 08′ 16″ est Géolocalisation sur la carte : Égypte Sphinx de Gizeh modifier   Le sphinx de Gizeh est la statue thérianthrope qui se dresse devant les grandes pyramides du plateau de Gizeh, en Basse-Égypte. Sculpture monumentale monolithique la plus grande du monde [ 1 ] avec 73,5 mètres de longueur, 14 mètres de largeur et 20,22 mètres de hauteur, elle représente un sphinx couchant. Réalisée vers -2500, elle serait attribuée à Djédefrê, l'un des pharaons de la IV e  dynastie, représentant son père le pharaon Khéops. Sommaire 1 Étymologie 2 Desc...
Read more

xlwings: Save and Close

Image
1 I am trying to find out how to save and close to an existing workbook using xlwings after writing in it: import xlwings as xw list_of_values = [1, 2, 3] workbook_path = 'abc.xlsx' wb = xw.Book(workbook_path) ws = wb.sheets['sheet1'] ws.range('E35').value = list_of_values wb.save() wb.close() When I get to wb.save(workbook_path) , there is a prompt stating: 'A file named abc.xlsx' already exists in this location. Do you want to replace it?' I want to overwrite the file immediately without the prompt coming up. According to the docs, wb.save() should automatically overwrite (see: https://docs.xlwings.org/en/v0.6.4/api.html). I have also tried wb.save(workbook_path) but the pop-up still appears. Appreciate any help on this please. p.s. - I am basically try...
Read more

Unable to retrieve custom list value from saved search in netsuite

Image
0 Creating saved search in suitescript using nlapiSearchRecord. All the column value returns except one column which is type is custom list. How could I get value of custom list? To get the value I'm using code lines below. columns[0] = new nlobjSearchColumn( 'customlist' ); var searchresults = nlapiSearchRecord( 'customrecord', null, filters, columns ); To get the column value var listValue = searchresult.getListValue( 'customlist' ); netsuite suitescript share | improve this question asked Nov 22 at 14:20 niso 18 6 ...
Read more