Canvas Element aus Html auslagern

[Schninn]

Hallo,

ich habe ein Canvas Element in einer Html Datei. Nun möchte ich das Canvas auslagern.
Klappt leider nicht so, wie ich mir das vorstelle (was wohl auch einfach daran liegt, dass ich nicht richtig weiß wie). Vielleicht könnt ihr mir helfen. Aktuell wird das Canvas an dieser Stelle eingebettet:

<div class="col-lg-6 col-md-6 hidden-sm hidden-xs">
<canvas id="map"></canvas>
</div>


Den kompletten Code aus dem Script habe ich in eine js Datei eingebunden (nur den Code ohne <script></script> und diese im head der html datei verlinkt (in der js. steht nur der Code den ich vorher im hdml hatte. Sonst nichts):

<script src="canvas1.js"></script>

Es soll auch noch eine weiteres Canvas angelegt werden. Ich hoffe, ihr könnt mir weiter helfen. Danke! LG

 

[cebito]

Was steht in deiner csnvas1.js? Poste das bitte hier rein und benutze dazu die Codewerkzeuge des Editors hier.

 

[Eyes_Only]

Du musst in deinem Hauptquelltext schon reinschreiben, wo die Karte angezeigt werden soll. Ich habe es so gemacht:

...
<div id="karte">&nbsp;</div>
...

Das steht in meiner kontakt.hmtl/php was auch immer.

Und dann habe ich eine .js-Datei "map.js" oder was in die Richtung und da steht dann irgendwo:

var map = new google.maps.Map(document.getElementById("karte"), myOptions);

Damit nimmst du dann Bezug auf die oben festgelegte ID "karte". An der Stelle auf der Hauptseite wo der Container/div "karte" ist, wird dann die (google-) Karte mit meinen Einstellungen "myOptions" angezeigt.

 

[Schninn]

Das ist die canvas1.js

var canvas = document.getElementById('map');
var ctx = canvas.getContext('2d');
var imgData;




// Sonnen
var saarland = new Image();
saarland.src = 'img/saarland.png';



var map = new Image();


map.onload = function(){
canvas.setAttribute('width', this.width);
canvas.setAttribute('height', this.height);

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0);
imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0);

console.log(imgData.width + ' Width');
console.log(imgData.height + ' Height');
console.log(imgData.data.length + ' Pixel');
};
map.src = 'img/dtlbdl.png';

canvas.onmousemove = function(evt){
var bcr = canvas.getBoundingClientRect();
var x = Math.round(evt.clientX - bcr.left);
var y = Math.round(evt.clientY - bcr.top);

//console.log(x+'#'+y);

var i = (x + (y * canvas.width)) * 4;
var bgc_r = imgData.data;
var bgc_g = imgData.data[i+1];
var bgc_b = imgData.data[i+2];
var bgc_a = imgData.data[i+3];


//Karte zeichnen, wenn man über keinem der Länder ist und/oder das Land wechselt, weil die Bilder sonst stehenbleiben:
ctx.fillStyle = "#fff";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(map, 0, 0);

//saarland 246, 164, 109
if((bgc_r >= 244 && bgc_r <= 248)&& (bgc_g >= 162 && bgc_g <= 166) && (bgc_b >= 107 && bgc_b <= 111) && bgc_a == 255) {
ctx.drawImage(saarland, 40, 500);
}