Image referrencing issue, not exporting from HTML5 canvas

Question

Honestly speaking, I'm not really well-versed with JS. I've been cracking at this for a few days with research on the internet and I can't seem to progress further with this. I hope somebody could help me on this.

I've been trying to get a T-Shirt designer to work and what I'm trying to do is to get the edited image on the canvas to be exported/downloaded for the user using the "save me" button, this is the code (I've removed the unnecessary/irrelevant bunch).

The container for the T-Shirt:

// The Javascript code I'm trying to have the save me button to download the image:
var saveme, img;

var valueSelect = $("#tshirttype").val();
$("#tshirttype").change(function() {
  valueSelect = $(this).val();
});

saveme = document.getElementById("save");
img = document.getElementById("img");

saveme.onclick = function(event) {
  var tmp = tcanvas.toDataURL();
  img.src = tmp;
  img.style.display = 'inline';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="flipback" type="button" class="btn" title="Rotate View"><i class="icon-retweet" style="height:19px;"></i></button>
<input type="button" value="save me" id="save" />
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
  <img name="tshirtview" id="tshirtFacing" src="img/crew_front.png">
  <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
    <canvas id="tcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    <img id="img" />
  </div>
</div>

How the page looks like:

From the image above, the save me button at the top is the one that I'm trying to add the function to. The error I get is this:

TypeError: img is undefined

But after adding the <img id="img" /> line, I'm left with no errors but the function doesn't display the image. Thank you! Hopefully somebody could help me. I really am willing to learn.

Answer 1

Try building out from the code below. From what I see, tcanvas is not defined in your code.

// The Javascript code I'm trying to have the save me button to download the image:
var saveme = document.getElementById("save");
var img = document.getElementById("img");
var tcanvas = document.getElementById("tcanvas");

// Drawing something on the canvas
var ctx = tcanvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 200, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

saveme.onclick = function(event) {
  img.src = tcanvas.toDataURL();
  img.style.display = 'inline';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="save me" id="save" />
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
  <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
    <canvas id="tcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    <img id="img" />
  </div>
</div>