Class: Browser::Canvas

Inherits:
Object show all
Includes:
Native
Defined in:
opal/browser/canvas.rb,
opal/browser/canvas/data.rb,
opal/browser/canvas/text.rb,
opal/browser/canvas/style.rb,
opal/browser/canvas/gradient.rb

Defined Under Namespace

Classes: Data, Gradient, Style, StyleObject, Text

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(*args) ⇒ Canvas

Returns a new instance of Canvas.



15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
# File 'opal/browser/canvas.rb', line 15

def initialize(*args)
  if DOM::Element === args.first
    element = args.shift

    if DOM::Element::Image === element
      @image   = element
    else
      @element = element
    end
  elsif Canvas === args.first
    @image = args.first
  end

  unless @element
    @element = $document.create_element('canvas')

    if @image
      @element[:width]  = @image.width
      @element[:height] = @image.height
    else
      @element[:width]  = args.shift
      @element[:height] = args.shift
    end
  end

  if @element.node_name != 'CANVAS'
    raise ArgumentError, "the element isn't a <canvas> element"
  end

  super(`#{@element.to_n}.getContext('2d')`)

  @style = Style.new(self)
  @text  = Text.new(self)

  if @image
    draw_image(@image)
  end
end

Instance Attribute Details

#element ⇒ Object (readonly)

Returns the value of attribute element.



13
14
15
 
# File 'opal/browser/canvas.rb', line 13

def element
  @element
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



13
14
15
 
# File 'opal/browser/canvas.rb', line 13

def style
  @style
end

#text ⇒ Object (readonly)

Returns the value of attribute text.



13
14
15
 
# File 'opal/browser/canvas.rb', line 13

def text
  @text
end

Instance Method Details

#append_to(parent) ⇒ Object 



62
63
64
 
# File 'opal/browser/canvas.rb', line 62

def append_to(parent)
  @element.append_to(parent)
end

#arc(x, y, radius, angle, clockwise = false) ⇒ Object 



154
155
156
157
158
 
# File 'opal/browser/canvas.rb', line 154

def arc(x, y, radius, angle, clockwise = false)
  `#@native.arc(x, y, radius, #{angle[:start]}, #{angle[:end]}, !clockwise)`

  self
end

#begin ⇒ Object 



105
106
107
108
109
 
# File 'opal/browser/canvas.rb', line 105

def begin
  `#@native.beginPath()`

  self
end

#bezier_curve_to(cp1x, cp1y, cp2x, cp2y, x, y) ⇒ Object 



166
167
168
169
170
 
# File 'opal/browser/canvas.rb', line 166

def bezier_curve_to(cp1x, cp1y, cp2x, cp2y, x, y)
  `#@native.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`

  self
end

#clear(x = nil, y = nil, width = nil, height = nil) ⇒ Object 



96
97
98
99
100
101
102
103
 
# File 'opal/browser/canvas.rb', line 96

def clear(x = nil, y = nil, width = nil, height = nil)
  x      ||= 0
  y      ||= 0
  width  ||= self.width
  height ||= self.height

  `#@native.clearRect(x, y, width, height)`
end

#clip(&block) ⇒ Object 



300
301
302
303
304
305
306
 
# File 'opal/browser/canvas.rb', line 300

def clip(&block)
  path(&block) if block

  `#@native.clip()`

  self
end

#close ⇒ Object 



111
112
113
114
115
 
# File 'opal/browser/canvas.rb', line 111

def close
  `#@native.closePath()`

  self
end

#curve_to(*args) ⇒ Object 



172
173
174
175
176
177
178
179
180
181
 
# File 'opal/browser/canvas.rb', line 172

def curve_to(*args)
  case args.length
  when 4 then quadratic_curve_to(*args)
  when 6 then bezier_curve_to(*args)

  else raise ArgumentError, "don't know where to dispatch"
  end

  self
end

#data(x = nil, y = nil, width = nil, height = nil) ⇒ Object 



79
80
81
82
83
84
85
86
 
# File 'opal/browser/canvas.rb', line 79

def data(x = nil, y = nil, width = nil, height = nil)
  x      ||= 0
  y      ||= 0
  width  ||= self.width
  height ||= self.height

  Data.new(self, x, y, width, height)
end

#draw_image(image, *args) ⇒ Object 



183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
 
# File 'opal/browser/canvas.rb', line 183

def draw_image(image, *args)
  if Canvas === image
    image = image.element
  else
    image = DOM(image)
  end

  if args.first.is_a?(Hash)
    source, destination = args

    `#@native.drawImage(#{image.to_n}, #{source[:x]}, #{source[:y]}, #{source[:width]}, #{source[:height]}, #{destination[:x]}, #{destination[:y]}, #{destination[:width]}, #{destination[:height]})`
  else
    case args.length
    when 0
      `#@native.drawImage(#{image.to_n}, 0, 0)`

    when 2
      `#@native.drawImage(#{image.to_n}, #{args[0]}, #{args[1]})`

    when 4
      `#@native.drawImage(#{image.to_n}, #{args[0]}, #{args[1]}, #{args[2]}, #{args[3]})`
    end
  end

  self
end

#fill(&block) ⇒ Object 



284
285
286
287
288
289
290
 
# File 'opal/browser/canvas.rb', line 284

def fill(&block)
  path(&block) if block

  `#@native.fill()`

  self
end

#gradient(*args, &block) ⇒ Object 



92
93
94
 
# File 'opal/browser/canvas.rb', line 92

def gradient(*args, &block)
  Gradient.new(self, *args, &block)
end

#height ⇒ Object 



58
59
60
 
# File 'opal/browser/canvas.rb', line 58

def height
  @element[:height].to_i
end

#line(x1, y1, x2, y2) ⇒ Object 



143
144
145
146
 
# File 'opal/browser/canvas.rb', line 143

def line(x1, y1, x2, y2)
  move_to x1, y1
  line_to x2, y2
end

#line_to(x, y) ⇒ Object 



137
138
139
140
141
 
# File 'opal/browser/canvas.rb', line 137

def line_to(x, y)
  `#@native.lineTo(x, y)`

  self
end

#load(path) ⇒ Object 



66
67
68
69
70
71
72
73
74
75
76
77
 
# File 'opal/browser/canvas.rb', line 66

def load(path)
  promise = Promise.new
  image   = $document.create_element('img')

  image.on :load do
    promise.resolve(image)
  end

  image[:src] = path

  promise
end

#move_to(x, y) ⇒ Object Also known as: move 



129
130
131
132
133
 
# File 'opal/browser/canvas.rb', line 129

def move_to(x, y)
  `#@native.moveTo(x, y)`

  self
end

#path(&block) ⇒ Object 



274
275
276
277
278
279
280
281
282
 
# File 'opal/browser/canvas.rb', line 274

def path(&block)
  `#@native.beginPath()`

  instance_eval(&block)

  `#@native.closePath()`

  self
end

#pattern(image, type = :repeat) ⇒ Object 



88
89
90
 
# File 'opal/browser/canvas.rb', line 88

def pattern(image, type = :repeat)
  `#@native.createPattern(#{DOM(image).to_n}, type)`
end

#point_in_path?(x, y) ⇒ Boolean

Returns:

  • (Boolean) 


308
309
310
 
# File 'opal/browser/canvas.rb', line 308

def point_in_path?(x, y)
  `#@native.isPointInPath(x, y)`
end

#quadratic_curve_to(cp1x, cp1y, x, y) ⇒ Object 



160
161
162
163
164
 
# File 'opal/browser/canvas.rb', line 160

def quadratic_curve_to(cp1x, cp1y, x, y)
  `#@native.quadraticCurveTo(cp1x, cp1y, x, y)`

  self
end

#rect(x, y, width, height) ⇒ Object 



148
149
150
151
152
 
# File 'opal/browser/canvas.rb', line 148

def rect(x, y, width, height)
  `#@native.rect(x, y, width, height)`

  self
end

#restore ⇒ Object 



123
124
125
126
127
 
# File 'opal/browser/canvas.rb', line 123

def restore
  `#@native.restore()`

  self
end

#rotate(angle, &block) ⇒ Object 



226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
 
# File 'opal/browser/canvas.rb', line 226

def rotate(angle, &block)
  if block
    save

    `#@native.rotate(angle)`

    instance_eval(&block)

    restore
  else
    `#@native.rotate(angle)`
  end

  self
end

#save ⇒ Object 



117
118
119
120
121
 
# File 'opal/browser/canvas.rb', line 117

def save
  `#@native.save()`

  self
end

#scale(x, y, &block) ⇒ Object 



242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
 
# File 'opal/browser/canvas.rb', line 242

def scale(x, y, &block)
  if block
    save

    `#@native.scale(x, y)`

    instance_eval(&block)

    restore
  else
    `#@native.scale(x, y)`
  end

  self
end

#stroke(&block) ⇒ Object 



292
293
294
295
296
297
298
 
# File 'opal/browser/canvas.rb', line 292

def stroke(&block)
  path(&block) if block

  `#@native.stroke()`

  self
end

#to_data(type = undefined) ⇒ Object 



312
313
314
 
# File 'opal/browser/canvas.rb', line 312

def to_data(type = undefined)
  `#{@element.to_n}.toDataUrl(type)`
end

#transform(m11, m12, m21, m22, dx, dy, &block) ⇒ Object 



258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
 
# File 'opal/browser/canvas.rb', line 258

def transform(m11, m12, m21, m22, dx, dy, &block)
  if block
    save

    `#@native.transform(m11, m12, m21, m22, dx, dy)`

    instance_eval(&block)

    restore
  else
    `#@native.transform(m11, m12, m21, m22, dx, dy)`
  end

  self
end

#translate(x, y, &block) ⇒ Object 



210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
 
# File 'opal/browser/canvas.rb', line 210

def translate(x, y, &block)
  if block
    save

    `#@native.translate(x, y)`

    instance_eval(&block)

    restore
  else
    `#@native.translate(x, y)`
  end

  self
end

#width ⇒ Object 



54
55
56
 
# File 'opal/browser/canvas.rb', line 54

def width
  @element[:width].to_i
end