crossword puzzle designer

by Ramya Ranganathan

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
 
<canvas id="canvas" width="300px" height="300px"></canvas>
<div> First Select the required size (make sure that the screen is not zoomed, no scroll bar)</div>
<div><input type="text" value="4" id="side"/><input id="resize" type="button" value="Resize"/>
</div>
<div> Use the buttons below and click on the above canvas to design your crossword puzzle:
    <li>Black: add a black rectangle.</li>
    <li> Clear: clears the clicked rectangle.</li> 
    <li>Write: writes the last pressed letter.</li> 
 </div>

<div><input id="addBlack" type="button" value="Black"/><input id="delete" type="button" value="Clear"/><input id="write" type="button" value="write"/>
</div>
<div> Then click the button below and click the first letter of each word, to add the clue Number</div>
<div><input id="addNum" type="button" value="add clues numbers"/>
</div>
<div> Write below the clues for each word, by referencing the clues number you added earlier.</div>
<div><textarea id="clues" name="textarea" style="width:250px;height:150px;"></textarea></div>
<div> Click save png to export.</div>    
<div><input type="button" id="btnSave" value="Save PNG"/></div>

<canvas id="canvas3" width="250" height="200" style="border: 1px solid black"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
 c = canvas.getContext("2d");
var n = 4;
var ltr = "A";
var clueNum = 1;

// add event listners

canvas.addEventListener('click', writeLetter);

$('#resize').click(function() {
    n = $('#side').val();
    drawBox();    
  });

$(document).keypress(function(event){
        if (event.which >= 97 && event.which <= 122) {
          ltr = String.fromCharCode(event.which-32);
        }
 })

$( "#write" ).click(function() {
    clearEvents();
    canvas.addEventListener('click', writeLetter)  ;  
});

$( "#addBlack" ).click(function() {
    clearEvents();
    canvas.addEventListener('click', blackBox);    
});

$( "#delete" ).click(function() {
    clearEvents();
    canvas.addEventListener('click', deleteBox) ;   
});

$( "#addNum" ).click(function() {
    clearEvents();
    canvas.addEventListener('click', writeNumber)  ;  
}); 

function clearEvents() {
  canvas.removeEventListener('click', writeLetter) ;
  canvas.removeEventListener('click', deleteBox);
  canvas.removeEventListener('click', blackBox) ;
  canvas.removeEventListener('click', writeNumber);
}

// draw the grid

function drawBox() {
    canvas.width= n*40;
    canvas.height = n*40;
    c.beginPath();
    c.fillStyle = "white";
    c.lineWidth = 3;
    c.strokeStyle = 'black';
    for (var row = 0; row < n; row++) {
        for (var column = 0; column < n; column++) {
            var x = column * 40;
            var y = row * 40;
            c.rect(x, y, 40, 40);
            c.fill();
            c.stroke();
           }
       }
  c.closePath();
}

// button functions

function writeLetter(e) {
    deleteBox(e)  ;
    c.font="25px Verdana";
    c.fillStyle = "black";
    c.fillText(ltr,(Math.floor(e.clientX/40)*40)+11,
               (Math.floor(e.clientY /40)*40)+ 29,40);

     
}

function blackBox(e) {
    c.fillStyle = "black";
    c.fillRect(Math.floor(e.clientX/40)*40,
               Math.floor(e.clientY/40)*40,
               40, 40);
}

function...