Home/ Questions/Q 6926493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:55:32+00:00

I’m trying to translate a little piece of javascript code (see commented out block)

  • 0

I’m trying to translate a little piece of javascript code (see commented out block) into coffeescript, but the canvas remains empty.

Coffeescript:

class CanvasDrawing
    constructor: (canvasID) ->
        @canvas = document.getElementById(canvasID)
        @context = @canvas.getContext "2d"

    drawLine: ->
        y = 5/8 * @canvas.height

        @context.beginPath()
        @context.moveTo 0, @y
        @context.lineTo @canvas.width, @y
        @context.closePath()
        @context.stroke()
        pos = 
            start: 
                x: 0
                y: @y
            end: 
                x: @canvas.width
                y: @y

    window.CanvasDrawing = CanvasDrawing

html/javascript:

<!DOCTYPE html>
    <head>
        <title>CanvasDrawing</title>
        <script type="text/javascript" src="CanvasDrawing.js"></script>
    </head>

    <body>
        <canvas id="canvas" style="width: 500px; height: 500px; border: 1px solid"></canvas>

        <script type="text/javascript">
            var canvasDrawing = new CanvasDrawing("canvas");
            canvasDrawing.drawLine();
        </script>

        <!--
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');

            context.beginPath();
            context.moveTo(0, 5/8 * canvas.height);
            context.lineTo(canvas.width, 5/8 * canvas.height);
            context.closePath();
            context.stroke();
        </script>
        -->
    </body>
</html>

The commented out javascript code doesn’t produce pretty output, but it works in Chrome.
What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You forgot to assign y as a property of the instance, so the @y argument passed to the drawing functions is undefined.

    @y = 5/8 * @canvas.height

    Unrelated: you can declare class window.CanvasDrawing and ditch that last line.

    • 0