Draw image into canvas using pngbase64 string

Question

i'm trying to draw an image inside canvas using base64 string also resize the canvas with img size but it doesn't working here is the code

**aspx code**



 <script src="../Scripts/MapGenerator/MapGeneraterScript.js"></script>
<asp:HiddenField ID="hiddenFieldMapBaseString" value="" runat="server" />
    <asp:HiddenField ID="hiddenFieldCanvasWidth" value="" runat="server" />
    <asp:HiddenField ID="hiddenFieldCanvasHeight" value="" runat="server" />
    <canvas id="canvasMasterPlan" style="border:solid;border-color:#353030;cursor:crosshair;" onclick="getImageCoords(event,this)">
    </canvas>

**code behind**

     System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(imgBytes));
    hiddenFieldCanvasHeight.Value = img.Height.ToString();
    hiddenFieldCanvasWidth.Value= img.Width.ToString();
    String base64String = Convert.ToBase64String(imgBytes);
    hiddenFieldMapBaseString.Value= String.Format("data:image/png;base64,{0}\"", base64String);
    ScriptManager.RegisterStartupScript(this, this.GetType(), "draw", "drawMap();", true);

**Javascript code**

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
strokestate = 0;
//Draw image into canvas
function drawMap() {
    c.width = document.getElementById("<%=hiddenFieldCanvasWidth.ClientID%>").value;
    c.height = document.getElementById("<%=hiddenFieldCanvasHeight.ClientID%>").value;
    var imageString = document.getElementById("<%=hiddenFieldMapBaseString.ClientID%>").value;
    c.drawImage(imageString, 0, 0);
}