# Drawing on canvas using array from json
**URL:** https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717
**Category:** web dev
**Created:** [September 24, 2018, 11:11am UTC](https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717 "2018-09-24T11:11:37Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@gwgwpl](https://forum.kirupa.com/u/gwgwpl)
#### Post date: [September 24, 2018, 11:11am UTC](https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717/1 "2018-09-24T11:11:37Z")
Hi, i’m trying to draw on canvas with pure js, using arrays from json file.
First, i’m using MidiConvert from:
[https://tonejs.github.io/MidiConvert/](https://tonejs.github.io/MidiConvert/)
To convert midi files to json format,
here is example of conversion twinkle\_twinkle.mid to json:
```auto
{
"header": {
"PPQ": 960,
"timeSignature": [
4,
4
],
"bpm": 100,
"name": "Twinke Twinkle Little Star"
},
"startTime": 0,
"duration": 28.800000000000015,
"tracks": [
{
"startTime": 0,
"duration": 0,
"length": 0,
"notes": [],
"controlChanges": {},
"id": 0,
"name": "Twinke Twinkle Little Star"
},
{
"startTime": 0,
"duration": 28.800000000000015,
"length": 69,
"notes": [
{
"name": "C4",
"midi": 60,
"time": 0,
"velocity": 0.5433070866141733,
"duration": 0.6
},
{
"name": "C3",
"midi": 48,
"time": 0,
"velocity": 0.5118110236220472,
"duration": 1.2
},
{
"name": "C4",
"midi": 60,
"time": 0.6,
"velocity": 0.5984251968503937,
"duration": 0.6
},
{
"name": "G4",
"midi": 67,
"time": 1.2,
"velocity": 0.6850393700787402,
"duration": 0.5999999999999999
},
{
"name": "E3",
"midi": 52,
"time": 1.2,
"velocity": 0.5984251968503937,
"duration": 1.2
},
{
"name": "G4",
"midi": 67,
"time": 1.7999999999999998,
"velocity": 0.6377952755905512,
"duration": 0.6000000000000001
},
{
"name": "A4",
"midi": 69,
"time": 2.4,
"velocity": 0.6299212598425197,
"duration": 0.6000000000000001
},
{
"name": "F3",
"midi": 53,
"time": 2.4,
"velocity": 0.5984251968503937,
"duration": 1.2000000000000002
},
{
"name": "A4",
"midi": 69,
"time": 3,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000001
},
{
"name": "G4",
"midi": 67,
"time": 3.6,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999997
},
{
"name": "E3",
"midi": 52,
"time": 3.6,
"velocity": 0.6062992125984252,
"duration": 1.1999999999999997
},
{
"name": "F4",
"midi": 65,
"time": 4.8,
"velocity": 0.5275590551181102,
"duration": 0.5999999999999996
},
{
"name": "D3",
"midi": 50,
"time": 4.8,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999993
},
{
"name": "F4",
"midi": 65,
"time": 5.3999999999999995,
"velocity": 0.5826771653543307,
"duration": 0.5999999999999996
},
{
"name": "E4",
"midi": 64,
"time": 5.999999999999999,
"velocity": 0.5748031496062992,
"duration": 0.5999999999999996
},
{
"name": "C3",
"midi": 48,
"time": 5.999999999999999,
"velocity": 0.5905511811023622,
"duration": 1.1999999999999993
},
{
"name": "E4",
"midi": 64,
"time": 6.599999999999999,
"velocity": 0.5826771653543307,
"duration": 0.5999999999999996
},
{
"name": "D4",
"midi": 62,
"time": 7.199999999999998,
"velocity": 0.5590551181102362,
"duration": 0.5999999999999996
},
{
"name": "F3",
"midi": 53,
"time": 7.199999999999998,
"velocity": 0.6377952755905512,
"duration": 0.5999999999999996
},
{
"name": "D4",
"midi": 62,
"time": 7.799999999999998,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000005
},
{
"name": "G3",
"midi": 55,
"time": 7.799999999999998,
"velocity": 0.6141732283464567,
"duration": 0.6000000000000005
},
{
"name": "C4",
"midi": 60,
"time": 8.399999999999999,
"velocity": 0.5354330708661418,
"duration": 1.1999999999999993
},
{
"name": "E3",
"midi": 52,
"time": 8.399999999999999,
"velocity": 0.5511811023622047,
"duration": 0.5999999999999996
},
{
"name": "C3",
"midi": 48,
"time": 8.999999999999998,
"velocity": 0.5669291338582677,
"duration": 0.5999999999999996
},
{
"name": "G4",
"midi": 67,
"time": 9.599999999999998,
"velocity": 0.6850393700787402,
"duration": 0.5999999999999996
},
{
"name": "E3",
"midi": 52,
"time": 9.599999999999998,
"velocity": 0.6614173228346457,
"duration": 1.1999999999999993
},
{
"name": "G4",
"midi": 67,
"time": 10.199999999999998,
"velocity": 0.6141732283464567,
"duration": 0.5999999999999996
},
{
"name": "F4",
"midi": 65,
"time": 10.799999999999997,
"velocity": 0.5354330708661418,
"duration": 0.5999999999999996
},
{
"name": "F3",
"midi": 53,
"time": 10.799999999999997,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999993
},
{
"name": "F4",
"midi": 65,
"time": 11.399999999999997,
"velocity": 0.5669291338582677,
"duration": 0.5999999999999996
},
{
"name": "E4",
"midi": 64,
"time": 11.999999999999996,
"velocity": 0.5826771653543307,
"duration": 0.5999999999999996
},
{
"name": "G3",
"midi": 55,
"time": 11.999999999999996,
"velocity": 0.6535433070866141,
"duration": 1.1999999999999993
},
{
"name": "E4",
"midi": 64,
"time": 12.599999999999996,
"velocity": 0.5905511811023622,
"duration": 0.5999999999999996
},
{
"name": "D4",
"midi": 62,
"time": 13.199999999999996,
"velocity": 0.5826771653543307,
"duration": 1.1999999999999993
},
{
"name": "G3",
"midi": 55,
"time": 13.199999999999996,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999993
},
{
"name": "G4",
"midi": 67,
"time": 14.399999999999995,
"velocity": 0.6850393700787402,
"duration": 0.5999999999999996
},
{
"name": "E3",
"midi": 52,
"time": 14.399999999999995,
"velocity": 0.5590551181102362,
"duration": 1.1999999999999993
},
{
"name": "G4",
"midi": 67,
"time": 14.999999999999995,
"velocity": 0.6377952755905512,
"duration": 0.5999999999999996
},
{
"name": "F4",
"midi": 65,
"time": 15.599999999999994,
"velocity": 0.5354330708661418,
"duration": 0.6000000000000014
},
{
"name": "F3",
"midi": 53,
"time": 15.599999999999994,
"velocity": 0.6062992125984252,
"duration": 1.2000000000000028
},
{
"name": "F4",
"midi": 65,
"time": 16.199999999999996,
"velocity": 0.5905511811023622,
"duration": 0.6000000000000014
},
{
"name": "E4",
"midi": 64,
"time": 16.799999999999997,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "G3",
"midi": 55,
"time": 16.799999999999997,
"velocity": 0.6299212598425197,
"duration": 1.2000000000000028
},
{
"name": "E4",
"midi": 64,
"time": 17.4,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "D4",
"midi": 62,
"time": 18,
"velocity": 0.5669291338582677,
"duration": 1.1999999999999993
},
{
"name": "G3",
"midi": 55,
"time": 18,
"velocity": 0.5826771653543307,
"duration": 1.1999999999999993
},
{
"name": "C4",
"midi": 60,
"time": 19.2,
"velocity": 0.5748031496062992,
"duration": 0.6000000000000014
},
{
"name": "C3",
"midi": 48,
"time": 19.2,
"velocity": 0.5748031496062992,
"duration": 1.2000000000000028
},
{
"name": "C4",
"midi": 60,
"time": 19.8,
"velocity": 0.5826771653543307,
"duration": 0.6000000000000014
},
{
"name": "G4",
"midi": 67,
"time": 20.400000000000002,
"velocity": 0.6692913385826772,
"duration": 0.6000000000000014
},
{
"name": "E3",
"midi": 52,
"time": 20.400000000000002,
"velocity": 0.6692913385826772,
"duration": 1.2000000000000028
},
{
"name": "G4",
"midi": 67,
"time": 21.000000000000004,
"velocity": 0.6220472440944882,
"duration": 0.6000000000000014
},
{
"name": "A4",
"midi": 69,
"time": 21.600000000000005,
"velocity": 0.6220472440944882,
"duration": 0.6000000000000014
},
{
"name": "F3",
"midi": 53,
"time": 21.600000000000005,
"velocity": 0.6614173228346457,
"duration": 1.2000000000000028
},
{
"name": "A4",
"midi": 69,
"time": 22.200000000000006,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "G4",
"midi": 67,
"time": 22.800000000000008,
"velocity": 0.5433070866141733,
"duration": 1.1999999999999993
},
{
"name": "E3",
"midi": 52,
"time": 22.800000000000008,
"velocity": 0.5826771653543307,
"duration": 1.1999999999999993
},
{
"name": "F4",
"midi": 65,
"time": 24.000000000000007,
"velocity": 0.5826771653543307,
"duration": 0.6000000000000014
},
{
"name": "D3",
"midi": 50,
"time": 24.000000000000007,
"velocity": 0.6220472440944882,
"duration": 1.2000000000000028
},
{
"name": "F4",
"midi": 65,
"time": 24.60000000000001,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "E4",
"midi": 64,
"time": 25.20000000000001,
"velocity": 0.5984251968503937,
"duration": 0.6000000000000014
},
{
"name": "C3",
"midi": 48,
"time": 25.20000000000001,
"velocity": 0.5826771653543307,
"duration": 1.2000000000000028
},
{
"name": "E4",
"midi": 64,
"time": 25.80000000000001,
"velocity": 0.5984251968503937,
"duration": 0.6000000000000014
},
{
"name": "D4",
"midi": 62,
"time": 26.400000000000013,
"velocity": 0.5748031496062992,
"duration": 0.6000000000000014
},
{
"name": "F3",
"midi": 53,
"time": 26.400000000000013,
"velocity": 0.6299212598425197,
"duration": 0.6000000000000014
},
{
"name": "D4",
"midi": 62,
"time": 27.000000000000014,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "G3",
"midi": 55,
"time": 27.000000000000014,
"velocity": 0.6377952755905512,
"duration": 0.6000000000000014
},
{
"name": "C4",
"midi": 60,
"time": 27.600000000000016,
"velocity": 0.5590551181102362,
"duration": 1.1999999999999993
},
{
"name": "C3",
"midi": 48,
"time": 27.600000000000016,
"velocity": 0.5433070866141733,
"duration": 1.1999999999999993
}
],
"controlChanges": {
"7": [
{
"number": 7,
"time": 0,
"value": 1
},
{
"number": 7,
"time": 0,
"value": 1
}
],
"10": [
{
"number": 10,
"time": 0,
"value": 0.4015748031496063
},
{
"number": 10,
"time": 0,
"value": 0.4015748031496063
}
],
"64": [
{
"number": 64,
"time": 0,
"value": 0
},
{
"number": 64,
"time": 0,
"value": 0
}
],
"91": [
{
"number": 91,
"time": 0,
"value": 0.3779527559055118
},
{
"number": 91,
"time": 0,
"value": 0.3779527559055118
}
],
"121": [
{
"number": 121,
"time": 0,
"value": 0
},
{
"number": 121,
"time": 0,
"value": 0
}
]
},
"id": 1,
"instrumentNumber": 0,
"instrument": "acoustic grand piano",
"instrumentFamily": "piano",
"channelNumber": 0,
"isPercussion": false
}
]
}
```
After getting json file i manually added x and y position in pixels for each notes,
and now i’m trying to draw each notes on canvas .
I’m not sure how to draw each note as new Rectangle Object,i already have have x and y starting point and static width, but height of rectangle needs to be calculated by using velocity ??
All rectangle objects are animated,so they falling down from top to the bottom of the canvas,
Its a mess, please share some links about using json files to draw on canvas.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 24, 2018, 5:03pm UTC](https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717/2 "2018-09-24T17:03:05Z")
The JSON file is just a data format. You can turn that into something more consumable like an array or just a plain object, if you don’t like working with JSON directly. Is your question around how to load the JSON file? Or how to draw rectangles once you have a series of X and Y positions? 🙂
Here is an article on how to read JSON: [https://www.kirupa.com/html5/all\_about\_json.htm](https://www.kirupa.com/html5/all_about_json.htm)
Here is an article on drawing rectangles using the canvas: [https://www.kirupa.com/html5/drawing\_rectangles\_squares\_canvas.htm](https://www.kirupa.com/html5/drawing_rectangles_squares_canvas.htm)
🙂
---
### Author:  [@gwgwpl](https://forum.kirupa.com/u/gwgwpl)
#### Post date: [September 24, 2018, 5:21pm UTC](https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717/3 "2018-09-24T17:21:48Z")
I already know basics of drawing on canvas with rectangles and arc,lines,etc, now i’m trying to create falling down miusic notes, based on x and y position from json file.
I will always use json file,coz i’m converting midi files to json.
So i have my piano keys in index.html file created as ul li list, this keys playing correct sounds on keydown events, and have theirs x and y position on screen.
I saved coordinates for piano keys in array, so in my piano\_keys array i have key with value C6 , and in json array i have also note with C6 value, i need to draw rectangle directly above correct piano key.
Its complicated, i guess i’m re-crerating synthesia piano player ;/
So i have already x,y and width for rectangles, but what about height?
It should be calculated using duration value, so duration per note = restangle height?