rehabstudio canvas test

by stopsatgreen

HTML

<canvas class="trans"></canvas>
<canvas class="lighttrans"></canvas>

SCSS

@mixin chessboard($color) {
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color), 
linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color);
}
.trans,
.lighttrans {
    background-size:30px 30px;
    background-position:0 0, 15px 15px
}
.trans {
    background-color: #666;
    @include chessboard(#333);
}
.lighttrans {
     background-color: #eee;
     @include chessboard(#ccc);
}