Hét vraag- en antwoordplatform van Nederland

Wat is de oorzaak van deze foutmelding in Javascript?

Foutmelding:
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)

Code die ik schrijf:
var CANVAS_BREEDTE = 1366;
var CANVAS_HOOGTE = 100;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = CANVAS_BREEDTE;
canvas.height = CANVAS_HOOGTE;
document.body.appendChild(canvas);

var x = document.getElementById("myinput");
if (x.value == "alpha-bet") {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var images;
var image1 = new Image();
image1.src = "file:///Users/saskyaa/Desktop/Nieuwe%20Website/mario.png";

var image2 = new Image();
image2.src = "file:///Users/saskyaa/Desktop/Nieuwe%20Website/dice.png";

var image3 = new Image();
image3 = "file:///Users/saskyaa/Desktop/Nieuwe%20Website/banana.png";

var image4 = new Image();
image4.src = "file:///Users/saskyaa/Desktop/Nieuwe%20Website/Banana2.gif";

var x = Math.floor(Math.random() * 700);
var y = Math.floor(Math.random() * 1280);
var image = Math.floor(Math.random() * 4);
if (image <= 1) {
images = image1;
} else if (image == 2) {
images = image2;
} else if (image == 3) {
images = image3;

Verwijderde gebruiker
6 jaar geleden

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Geef jouw antwoord

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

/
Geef Antwoord
+
Selected image

Antwoorden (1)

Je hebt je haakjes niet goed gesloten. Zelf getest en kreeg geen foutmeldingen meer.
(Lees meer...)
Verwijderde gebruiker
6 jaar geleden
Verwijderde gebruiker
6 jaar geleden
Is dit trouwens wel je volledige code of zit je tegen de maximale tekens aan?
Anders moet je, je code even elders uploaden en hier de link plaatsen.
Verwijderde gebruiker
6 jaar geleden
https://docs.google.com/document/d/1BfmWBdTuQAbOxGlqgzvMSCV6Nxs9DoybvEVmV589pxQ/edit?usp=drivesdk Dit is de volledige code... Bedankt voor de hulp in elk geval!
Verwijderde gebruiker
6 jaar geleden
Ik heb een paar kleine aanpassingen gemaakt namelijk de canvas direct in de body gezet i.p.v. deze door JS te laten maken. Ook heb ik de canvas groter gemaakt en om te debuggen het stukje van de input weg gehaald. Bij de random functie moest je 0 als eerste plaatje gebruiken oplopend tot 3 (0, 1, 2, 3). Zie script voor aanpassingen. https://docs.google.com/document/d/1ct2e-o-00oBfwPiJK1n9760bMye8VcggLf6jDDICkaU/edit?usp=sharing
Deel jouw antwoord

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

/
Geef Antwoord
+
Selected image