1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

#![no_std]
use js::*;

pub struct CanvasContext {
    pub handle: f64,
}

pub trait Canvas2dApi {
    fn set_fill_color(&self, color: &str);
    fn fill_rect(&self, x: impl Into<f64>, y: impl Into<f64>, w: impl Into<f64>, h: impl Into<f64>);
    fn clear_rect(
        &self,
        x: impl Into<f64>,
        y: impl Into<f64>,
        w: impl Into<f64>,
        h: impl Into<f64>,
    );
}

impl CanvasContext {
    pub fn from_canvas_element(el: impl Into<f64>) -> CanvasContext {
        CanvasContext {
            handle: {
                js!(r#"function(el){
                    el = this.getObject(el);
                    let ctx = el.getContext("2d");
                    return this.storeObject(ctx);
                }"#)
                .invoke_1(el.into())
            },
        }
    }
}

impl Canvas2dApi for CanvasContext {
    fn set_fill_color(&self, color: &str) {
        js!("function(ctx,strPtr,strLen){
            ctx = this.getObject(ctx);
            ctx.fillStyle = this.readUtf8FromMemory(strPtr,strLen);
        }")
        .invoke_3(self.handle, color.as_ptr() as u32, color.len() as u32);
    }

    fn fill_rect(
        &self,
        x: impl Into<f64>,
        y: impl Into<f64>,
        w: impl Into<f64>,
        h: impl Into<f64>,
    ) {
        js!("function(ctx,x,y,w,h){
            ctx = this.getObject(ctx);
            ctx.fillRect(x,y,w,h);
        }")
        .invoke_5(self.handle, x, y, w, h);
    }

    fn clear_rect(
        &self,
        x: impl Into<f64>,
        y: impl Into<f64>,
        w: impl Into<f64>,
        h: impl Into<f64>,
    ) {
        js!("function(ctx,x,y,w,h){
            ctx = this.getObject(ctx);
            ctx.clearRect(x,y,w,h);
        }")
        .invoke_5(self.handle, x, y, w, h);
    }
}