card_front.html

 <!-- Solution for data persistance, must be included somewhere in the template -->
<script>
// v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>

<!--original template up to: -->

<main class="layout__main">
    <div class="layout__content"></div>

  <!-- DRAWING -->
    <canvas id='kanjiWrite' onpointermove="draw(event)" style="width:300px; height:300px; position:fixed; border:2px solid; margin-left:-20%">
    </canvas>
    <input type="button" value="clear" id="clr" onclick="erase()" style="position:absolute;">

<script>
var canvas = document.getElementById('kanjiWrite');
var ctx = canvas.getContext('2d');
var url=null; 
var lineWidth = 8;
ctx.lineWidth = lineWidth ;
ctx.lineCap = 'round';
ctx.strokeStyle = '#c0392b';
var pos = null;


function  getMousePos(evt) {

  var rect = canvas.getBoundingClientRect(), // abs. size of element
       scaleX = canvas.width / rect.width,    // relationship bitmap vs. element for X
       scaleY = canvas.height / rect.height;

  return {
    x: (evt.clientX - rect.left) * scaleX,  
    y: (evt.clientY - rect.top) * scaleY   
  }
}
  

function draw(e) {
  if (e.pressure == 0) {
     pos = null;
     return;
  }
  ctx.beginPath(); // begin
 
  if (!pos) pos = getMousePos(e);
   ctx.moveTo(pos.x, pos.y); // from

   pos  = getMousePos(e);
   ctx.lineWidth = lineWidth * (e.pressure + 0.2);
   ctx.lineTo(pos.x, pos.y); // to
   ctx.stroke(); // draw it!
   confirm();
}

function confirm(){
   if (Persistence.isAvailable()) { 
    url = canvas.toDataURL();
    Persistence.setItem(url); 
    }
}

function erase() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     document.getElementById("kanjiWrtie").style.display = "none";
    }
</script>

  
 <aside class="layout__aside"></aside>
</main>

<!--the rest of the original template -->