[FRAGE] JavaScript Objekt undefined in Mal Funktion

[HiTTi]

Hallo Community,

ich habe mich mal hier angemeldet, weil wir in der Uni nun JavaScript haben und ich mal ein Mal-Programm erstellen will, alleine nur mit JavaScript.
Leider stoße ich auf einige Fehler und wollte hier um Hilfe fragen.

Im Moment hänge ich daran, dass ich wenn ich meine Leinwand + das Canvas Obejkt erstelle nicht mehr malen kann. Was kein Wunder ist, da die beiden Objekte noch nicht bekannt sind. Nur wie löse ich das Problem. Mir fällt nichts ein....

Zudem möchte ich den fest definierten Leinwänden noch eine Skalierungsmöglichkeit geben. So dass ich mit meinem Groeße_regeler noch etwas an der Größe machen kann.

Hat jmd von euch eine Idee und kann mir helfen?

LG HiTTi

function changeColorStift(auswahl, wert) {

    var festfarbe = "pink";

    switch (auswahl) {
        case 1:
            festfarbe = "blue";
            break;
        case 2:
            festfarbe = "red";
            break;
        case 3:
            festfarbe = "yellow";
            break;
        case 4:
            festfarbe = "green";
            break;
        case 5:
            festfarbe = farbe.value;
            break;
        default:
            festfarbe = "black";
            break;

    }

    var festgroeße;

    switch (wert) {
        case 1:
            festgroeße = groeßeregler.value;
            break;
        case 2:
            festgroeße = 5;
            break;
        case 3:
            festgroeße = 10;
            break;
        default:
            festgroeße = 5;
            break;


    }
    male(festfarbe, festgroeße);
}
;

function leinwaende(auswahl) {
    switch (auswahl) {
        case 1:
            var leinwand = new div(800, 600, farbe.value, "leinwand");
            document.body.appendChild(leinwand);
            var canvas_ebene = new canvas(800, 600, "azure");
            leinwand.appendChild(canvas_ebene);
            break;
        case 2:
            var leinwand = new div(900, 800,farbe.value, "leinwand");
            var canvas_ebene = new canvas(900, 800, "azure");
            document.body.appendChild(leinwand);
            leinwand.appendChild(canvas_ebene);
            break;
        case 3:
            var leinwand = new div(1000, 600, farbe.value, "leinwand");
            var canvas_ebene = new canvas(1000, 600, "azure");
            document.body.appendChild(leinwand);
            leinwand.appendChild(canvas_ebene);
            break;
        default:
            var leinwand = new div(1000, 600, farbe.value, "leinwand");
            var canvas_ebene = new canvas(1000, 600, "azure");
            document.body.appendChild(leinwand);
            leinwand.appendChild(canvas_ebene);
            break;
    }
    
   
};

achtmalsechs.addEventListener("click", function () {
    leinwaende(1);
}, false);

neunmalacht.addEventListener("click", function  () {
    leinwaende(2);
}, false);

tausendmalsechs.addEventListener("click", function () {
    leinwaende(3);
}, false);

// Malen!



//Stiftaktionen
festerStiftblue.addEventListener("click", function () {
    changeColorStift(1, 2);
}, false);

festerStiftred.addEventListener("click", function () {
    changeColorStift(2, 3);
}, false);

festerStiftyellow.addEventListener("click", function () {
    changeColorStift(3, 2);
}
, false);

festerStiftgreen.addEventListener("click", function () {
    changeColorStift(4, 3);
}, false);

festerStifteigen.addEventListener("click", function () {
    var eigenerStift = new stift(80, 25, farbe.value, farbe.value);

    var currentColor = farbe.value;
    var currentSize = groeßeregler.value;
    toolbar.appendChild(eigenerStift);
    changeColorStift(5, 1);

    eigenerStift.addEventListener("click", function () {


        male(currentColor, currentSize);



    }, false);
}, false);




function male(festfarbe, festgroeße) {
    
    

    var ctx_ebene = canvas_ebene.getContext('2d');
    var mouse = {x: 0, y: 0};
    /* Mouse Capturing Work */
    canvas_ebene.addEventListener('mousemove', function (paint) {
        mouse.x = paint.pageX - this.offsetLeft;
        mouse.y = paint.pageY - this.offsetTop;
    }, false);
    /* Drawing on Paint App */
    ctx_ebene.lineWidth = festgroeße;
    ctx_ebene.lineJoin = 'round';
    ctx_ebene.lineCap = 'round';
    ctx_ebene.strokeStyle = festfarbe;
    canvas_ebene.addEventListener('mousedown', function () {
        ctx_ebene.beginPath();
        ctx_ebene.moveTo(mouse.x, mouse.y);
        canvas_ebene.addEventListener('mousemove', onPaint, false);
    }, false);
    canvas_ebene.addEventListener('mouseup', function () {
        canvas.canvas_ebene.removeEventListener('mousemove', onPaint, false);
    }, false);
    var onPaint = function () {
        ctx_ebene.lineTo(mouse.x, mouse.y);
        ctx_ebene.stroke();

// geht nicht mehr.....
        delet_option.addEventListener("click", function () {

            ctx_ebene.fillStyle = leinwand.farbe;
            
            ctx_ebene.fillRect(0, 0, 300, 150);

            ctx_ebene.clearRect(0, 0, canvas_ebene.width, canvas_ebene.height);

        }, false);




    };

};



// Speicheroption
//save_option.addEventListener("click", function () {
//
//    var leinwand = {'a': 800, 'b': 600, 'c': "azure"};
//    var localress = JSON.stringify(leinwand);
//    localStorage.setItem("leinwand", localress);
//
//    var toolbar = {'a': 800, 'b': 150, 'c': "azure"};
//    var localress2 = JSON.stringify(toolbar);
//    localStorage.setItem("leinwand2", localress2);
//
//
//}, false);

window.addEventListener("load", function ()
{


    //Adden des Divs Toolbar und Leinwand
    document.body.appendChild(toolbar);
    //document.body.appendChild(leinwand);  
    //document.body.appendChild(gruppe);



    changeColorStift();





});

- - - Aktualisiert - - -

Ok das Problem mit dem nicht malen, konnte ich lösen. Ich hab dem Canvas objekt eine ID gegeben und mir diese in der Funktion male per getElementByID geholt. Dann ist es auch wieder bekannt.
Jetzt ist nur die Frage, wie ich es mit der zusätzlichen Skalierung umsetze. Den Schieberegler kann ich direkt abgreifen und mir die Value als größe für die Leinwand usw setzen, jedoch muss ich den Button dann immer wieder drücken. Bei mir soll es live funktionieren.

- - - Aktualisiert - - -

Hallo zusammen,

wie bekomme ich es hin. Mein Canvas mit richtiger Dateiendung und dem Namen zu speichern?
Mein Versuch:

var mycanvas = document.getElementById("canvas");
    var image = mycanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
    var bildname = prompt("Bitte Dateinamen eingeben", "MeinBild.png");
    var down = document.getElementById("download");
    down.setAttribute("HREF", image);
    down.setAttribute("DOWNLOAD", bildname);
    window.location.href = image;

Vll weißt das einer?

LG HiTTi

 

[kkapsner]

Eigentlich sollte das alles funktionieren, wenn du nicht setAttribute verwendest, sondern die Attribute direkt ansprichst:

    var canvas = document.getElementById("canvas");
    var image = canvas.toDataURL("image/png")
    var down = document.getElementById("download");
    down.href = image;
    down.download = "MainBild.png";
    down.click();

PS: Warum tauschst du das "image/png" durch "image/octet-stream"?
PPS: das prompt() ist überflüssig. Bei Speicherdialog des Browsers kann man ja den Namen dann auch ändern.