gistfile1.js

    mol.ui.Map.MarkerCanvas = mol.ui.Element.extend(
        {
            init: function() {
                this._width = 120;
                this._height = 120;
                this._super('<canvas width='+this._width+' height='+this._height+'>');
                this.setStyleName('mol-MarkerCanvas');
                this._ctx = null;
                this._canvasSupport = false;
                this._iconBackground = new Image();
                this._iconForeground = new Image();
                this._iconError = new Image();
                this._icon = new Image();
                /**
                this._iconBackground.src = "/static/pm-background.png";
                this._iconForeground.src = "/static/pm-foreground.png";
                this._iconError.src = "/static/pm-error.png";
                this._icon = null;
                */
            },
            canvasSupport: function(){
                if ( !!document.createElement('canvas').getContext ) {
                    this._ctx = this.getElement()[0].getContext("2d");
                    this._canvasSupport = true;
                }
                return this._canvasSupport;
            },
            setBackgroundSrc: function(imgSrc){
                this._iconBackground.src = imgSrc;
            },
            setForegroundSrc: function(imgSrc){
                this._iconForeground.src = imgSrc;
            },
            setErrorSrc: function(imgSrc){
                this._iconError.src = imgSrc;
            },
            setIconSrc: function(imgSrc){
                this._icon.src = imgSrc;
            },
            setIconOnload: function(cb){
                this._icon.onload = cb;
            },
            clearCanvas: function(){
                this._ctx.clearRect ( 0 , 0 , this._width , this._height );
            },
            drawBackground: function(){
                this._ctx.drawImage(this._iconBackground, 0, 0, this._width,this._height);
            }
            drawIcon: function(){
                this._ctx.drawImage(this._icon, 0, 0, this._width,this._height);
            }
            drawForeground: function(){
                this._ctx.drawImage(this._iconForeground, 0, 0, this._width,this._height);
            }
            drawError: function(){
                this._ctx.drawImage(this._iconError, 0, 0, this._width,this._height);
            }
            getDataURL(){
                return this.getElement()[0].toDataURL("image/png");
            }
        }
    );