<commit_before><template>
  <div class='col-xs-8 full-height' style='background-color:#c0c0c0'>
    <canvas id='main-canvas'></canvas>
  </div>
</template>
<!--
<script>
// var rect = new fabric.Rect({
//   left: 100,
//   top: 100,
//   fill: 'red',
//   width: 20,
//   height: 20
// });
// canvas.add(rect);
</script>
-->

<style>
#main-canvas {
  width: 100%;
  height: 100%;
}
</style><commit_msg>fabricjs canvas showoff<commit_after><template>
  <div class='col-xs-8 full-height' id='ch-canvas-col' style='background-color:#c0c0c0'>
    <canvas id='main-canvas'></canvas>
  </div>
</template>
<script>
var fabric = window.fabric
export default {
  created: function () {
    console.log("I'm created")
  },
  mounted: function () {
    console.log("I'm mounted")
    var $ = window.$
    var canvas = new fabric.Canvas('main-canvas')
    canvas.setWidth($('#ch-canvas-col').width())
    canvas.setHeight($('#ch-canvas-col').height())
    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20
    })
    canvas.add(rect)
  },
  data: function () {
    console.log("I'm data")
    return {}
  }
}
</script>

<style>
#main-canvas {
  width: 100%;
  height: 100%;
}
</style>
{'fraction_non_alphanumeric': 0.2085691188358933, 'fraction_numerical': 0.03233629749393695, 'mean_word_length': 2.9552715654952078, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 24, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6510979', 'n_tokens_mistral': 486, 'n_tokens_neox': 446, 'n_words': 94}