Create a Grid Art in JS

Question

I am trying to create a clickable grid.

When the user clicks a grid
Then fill that box with a chosen color
And continue filling cells
But if user clicks mouse
Then stop filling cells

When the user inputs grid dimensions
Then create the grid cells

I have the basic grid structure, but it appears and then disappears.

function makeGrid() {
  var heights = document.getElementById("inputHeight").value;
  var widths = document.getElementById("inputWidth").value;
  for (var i=0; i<heights; i++){
    for (var j=0; j<heights; j++){
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      //stroke(0);
      ctx.fillStyle = "white";
      ctx.fillRect(63*heights, 63*widths, 63, 63);
      document.body.appendChild(x);
    }
  }
}

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
    <title>Clickable Grid!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Clickable Grid</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit" value= "submit" onClick = "makeGrid()">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

Your submit button is triggering a refresh. You need to stop the refresh. — Rafael, Oct 02 '18 at 16:50
i didn't see canvas element in your html file how can you render the result? something like this — user-9725874, Oct 02 '18 at 17:07
@JesseJay he is creating the canvas element in `makeGrid()` and appending it to the body. — Rafael, Oct 02 '18 at 17:09

score 0 · Answer 1 · answered Oct 02 '18 at 17:07

The submit event is triggering a refresh. You need to tap into the submit event and prevent its default action.

In addition, you have an off-by-one error, for grid width, in makeGrid(), because you are using height value for both loops. The grid doesn't appear as you want because the logic needs modification (outside the scope of this question):

function makeGrid(ev) {
  ev.preventDefault();
  var heights = document.getElementById("inputHeight").value;
  var widths = document.getElementById("inputWidth").value;
  for (var i=0; i<heights; i++){
    for (var j=0; j<widths; j++){
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      //stroke(0);
      ctx.fillStyle = "white";
      ctx.fillRect(63*heights, 63*widths, 63, 63);
      document.body.appendChild(x);
    }
  }
}

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
    <title>Clickable Grid!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Clickable Grid</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker" onsubmit="makeGrid(event)">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit" value= "submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

Thanks so much, the j loop for a typo . Next I will be working on clicking the grid and filling them with a color of user choice.Could you provide me with any pointers/tips on how to go about it (probably event listener on mouse click? ) — Vinay, Oct 02 '18 at 18:30
I modified the code a little to use HTML tables instead of canvas. Now I want to click individual cells in the table and fill color of choice (user input). Edited the code above — Vinay, Oct 03 '18 at 21:16
When you create the `td`, add an `onclick` handler that will set the `td`s `backgroundColor` style to the color-picker's value. — Rafael, Oct 03 '18 at 21:52
Create another question, after your attempt, I will try to help — Rafael, Oct 03 '18 at 21:59
thanks a ton! I think I have done it and with alert I verified the color value getting assigned to 'td' . But not sure if I did the correct way , I will create another question. — Vinay, Oct 03 '18 at 22:29
https://stackoverflow.com/q/52636590/10447126 -- New question — Vinay, Oct 03 '18 at 22:36

Create a Grid Art in JS

1 Answers1