CoffeeScript Refactoring shared variable

Question

I'm new to CoffeeScript and trying to understand how to refactor this example. Since both functions share canvas and context is there a way to pull them out side the functions and share them instead of repeating myself? I'm sure it is something obvious I'm missing, but I have not been able to get it to work.

CoffeeScript File

@draw_rectangle = ->
  canvas = document.getElementById("main_canvas")
  context = canvas.getContext("2d")
  context.fillRect(50, 25, 150, 100)

@draw_square = ->
  canvas = document.getElementById("main_canvas")
  context = canvas.getContext("2d")
  context.fillRect(100, 50, 100, 50)

HTML Body:

<body>
  <canvas id="main_canvas"></canvas>
  <p><a onclick="draw_square()" href="#">Draw Square</a></p>
  <p><a onclick="draw_rectangle()" href="#">Draw Rectangle</a></p>
</body>

Trevor Burnham · Accepted Answer · 2011-09-30 23:51:58Z

6

Probably the most elegant way would be to use a class, or at least an object, that would hold both methods and the canvas and context variables. The object would also keep track of whether it's been initialized already. Here's a first attempt:

painter =
  draw_rectangle: ->
    @init() unless @initialized
    @context.fillRect 50, 25, 150, 100

  draw_square: ->
    @init() unless @initialized
    @context.fillRect 100, 50, 100, 50

  init: ->
    canvas = document.getElementById "main_canvas"
    @context = canvas.getContext "2d"
    @initialized = true

Now, if you later decided that you wanted to have multiple canvases, it'd be very easy to change painter = to class Painter and reuse the code.

edited Sep 30, 2011 at 23:51

answered Sep 29, 2011 at 0:30

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

John Over a year ago

Your solution is exactly what I'm looking for, but clicking on the links is no longer drawing the rectagle/square. I should be calling painter.draw_rectangle() instead of draw_rectangle() in the onclick attribute, correct?

John Over a year ago

missing : after property id I'm seeing this javascript error in the firebug console, and clicking the links is still no longer working.

Trevor Burnham Over a year ago

Well, it should really be @painter = or window.painter = to make it a global... does that fix the issue?

John Over a year ago

Sorry to keep bugging you but the problem is still present.

Trevor Burnham Over a year ago

You are compiling the code to JavaScript, right? What line number does Firebug attribute the error to?

|

Simone Carletti · Accepted Answer · 2011-09-29 00:27:08Z

0

You can use a custom helper method to draw a rectangle.

canvasRectangle = (id, x, y, w, h) ->
  canvas  = document.getElementById(id)
  context = canvas.getContext("2d")
  context.fillRect(x, y, w, h)

@draw_rectangle = ->
  canvasRectangle("main_canvas", 50, 25, 150, 100)

@draw_square = ->
  canvasRectangle("main_canvas", 100, 50, 100, 50)

answered Sep 29, 2011 at 0:27

Simone Carletti

177k50 gold badges371 silver badges370 bronze badges

1 Comment

Trevor Burnham Over a year ago

That does fix the repetition nicely, though I think the questioner wanted to avoid running the document.getElementById and canvas.getContext functions repeatedly. If you were drawing a lot of rectangles and squares, that'd probably get to be a performance drag.

Collectives™ on Stack Overflow

CoffeeScript Refactoring shared variable

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related