JSFiddle - React, Tailwind, and code Playground

by jorix

HTML

<a onclick="d1(); return false;" href="#">d1</a> |
<a onclick="d2(); return false;" href="#">d2</a> |
<a onclick="d1();d2(); return false;" href="#">d1 & d2</a>
<hr>
<div id="container" style="width:400px; height:400px"></div>

JavaScript

// OL-Canvas: The second call to clearRect not act.
var container = document.getElementById("container");
var root = document.createElement("canvas");
container.appendChild(root);
var _canvas = root.getContext("2d");

var drawExternalGraphic = function(externalGraphic, pointRadius, x, y) {
    var img = new Image();
    var onLoad = function() {
        var width = pointRadius * 2,
            height= pointRadius * 2;
        _canvas.drawImage(img, x, y, width, height);
    };
    img.onload = onLoad;
    img.src = externalGraphic;
}

var marker = "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker.png",
    rootHeight = root.height,
    rootWidth = root.width;
var d1 = function() {
        _canvas.clearRect(0, 0, rootWidth, rootHeight);
        drawExternalGraphic(marker, 20, 50, 100);
    },
    d2 = function() {
        _canvas.clearRect(0, 0, rootWidth, rootHeight);
        drawExternalGraphic(marker, 15, 100, 100);
    };