JSFiddle - React, Tailwind, and code Playground

by nnur ffarazi

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body onload="initialize()">
    <div id="map_canvas" style="zIndex:0;"></div>
    <canvas id="canvas" width="240" height="297" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <img id="scream" width="50" height="50" src="https://agdvts2.s3.amazonaws.com/%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20563048815583cde906423e61%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/car1.png" alt="The Scream">
    <img id="source" style="zIndex:100;" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="10" height="10">
     <h2 class='show'></h2>
         <canvas id="myCanvas" width="578" height="400"></canvas>

</body>

</html>

CSS

html {
     width: 100%;
     height: 100%;
 }
 body {
     width: 100%;
     height: 100%;
     margin: 0;
 }
 #map_canvas {
     width: 50%;
     height: 50%;
 }

JavaScript

function createMarker(width, height, radius) {

    var canvas, ctx;

var img1 = new Image();   // Create new img element
img1.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';



    canvas = document.createElement("canvas");


    ctx = canvas.getContext("2d");


    //context.font = "30px Arial";
    //context.fillText("Hello World", 10, 50);


    var img = document.getElementById("canvas");
    var image = document.getElementById("source");
    //ctx.drawImage(image, 10, 10);
    //ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);

    ctx.globalAlpha = 0.5;

    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 100, 100);

    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);

    return canvas.toDataURL();

}
function convertImgToBase64(url, anglevalue, callback, outputFormat) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        canvas.height = this.height;
        canvas.width = this.width;




        var angle = anglevalue.deg ? anglevalue.deg * Math.PI / 180 : anglevalue.rad;
        //console.log(angle);
        var centerX = this.width / 2;
        var centerY = this.height / 2;

        ctx.clearRect(0, 0, this.width, this.height);
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(angle);
        ctx.translate(-centerX, -centerY);





        ctx.drawImage(this, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback(dataURL);
        canvas = null;
    };

    img.src = url;
}



// example
function initialize() {



    // creating a map
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 4,
        center: new google.maps.LatLng(-25.363882, 131.044922),
        mapTypeId: google.maps.MapTypeId.ROADMAP
   ...