Atom Canvas Block Decoration

atom_canvas_block_decoration.js

// Paste this into the inspector in Atom.

var element = document.createElement('div')
var canvas = document.createElement("canvas")
element.appendChild(canvas)
element.style.setProperty("width", "100%")
element.style.setProperty("height", "150px")
canvas.style.setProperty("width", "100%")
canvas.style.setProperty("height", "100%")
canvas.style.setProperty("background-color", "white")

var editor = atom.workspace.getActiveTextEditor()
var marker = editor.markScreenPosition([0, 0])
editor.decorateMarker(marker, {type: 'block', position: 'before', item: element})

ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(25,24)
ctx.stroke()