How to call native javascript methods from opal?

Question

I'm coding a simple game based on html canvas. I'm now porting from coffeescript to opal.

I'd like to wrap the CanvasRenderingContext2D object in an efficient way.

My current solution is a wrapper, but I'd really like to make that toll free bridged.

app.rb:

class Game
    def initialize
        @canvas = Element.find('#canvas').get(0)
        js_ctx  = `this.canvas.getContext('2d')`        # this is a javascript object
        @ctx    = CanvasRenderingContext2D.new(js_ctx)  # create the proxy
        @ctx.fillStyle='red'
        @ctx.fillRect(10,10,50,50)
    end
end

# the opal proxy class (named $CanvasRenderingContext2D in javascript space)
class CanvasRenderingContext2D
    # I currently model the proxy as a has_a while I'd prefer it to be is_a
    attr_reader :js    # the native javascript object

    def initialize(js)
        @js = js
    end

    # getter
    def fillStyle
        `this.js.fillStyle`
    end

    # setter
    def fillStyle= value
        `this.js.fillStyle= value`
    end

    # method invocation
    def fillRect x,y,width,height
        `this.js.fillRect(x,y,width,height)`
    end
end

Any hints are welcome.

any reason you haven't accepted the answer below? – iconoclast Nov 26 '14 at 20:11 — iconoclast, Nov 26 '14 at 20:11

score 5 · Answer 1 · answered Mar 14 '14 at 17:39

Last time I was working with opal I followed the same path as you, created wrappers and even called directly javascript direct from my code. Recently I've come across with blog describing the use of the Native class, so your code would look like this:

require 'native'
class Game
  def initialize
    @canvas = Element.find('#canvas').get(0)
    @ctx  = Native(`this.canvas.getContext('2d')`)
    @ctx.fillStyle='red'
    @ctx.fillRect(10,10,50,50)
  end
end

Haven't really tested this method yet

[1]http://dev.mikamai.com/post/79398725537/using-native-javascript-objects-from-opal

How to call native javascript methods from opal?

1 Answers1