最近在学习小程序开发，自己手敲的代码，和教程代码一样（通过工具逐行比对了代码，确保没有敲错代码），是运行效果不一样，不知道问题出在哪里了？恳请大神赐教

我敲的代码：

<!--index.wxml-->

<view class="box">

  <view class='title'>基本绘图</view>

  <view>

    <canvas canvas-id="myCanvas" ></canvas>

  </view>

  <view class='btnLayout'>

    <button type='primary' bindtap="clear">清除</button>

    <button type='primary' bindtap="drawDot">画点</button>

    <button type='primary' bindtap="drawCircle">画圆</button>

  </view>

  <view class='btnLayout'>

    <button type='primary' bindtap="drawDash">画虚线</button>

    <button type='primary' bindtap="capAndJoin">端点交点</button>

    <button type='primary' bindtap="drawText">画字</button>

  </view>

  <view class='btnLayout'>

    <button type='primary' bindtap="circularGrad">圆形渐变</button>

    <button type='primary' bindtap="shadowRect">阴影矩形</button>

    <button type='primary' bindtap="translucent">半透明</button>

  </view>

</view>

/**index.wxss**/

canvas {

  width: 100%;

  height: 340px;

  background-color: cornflowerblue;

}

button {

  width: 100px;

}

.btnLayout {

  display: flex;

  flex-direction: row;

  margin: 10px;

  justify-content: space-around;

}

教材附带的代码：

<!--pages/API/Drawing/index.wxml-->

<view class="box">

  <view class='title'>基本绘图</view>

  <view>

    <canvas canvas-id="myCanvas" ></canvas>

  </view>

  <view class='btnLayout'>

    <button type='primary' bindtap="clear">清除</button>

    <button type='primary' bindtap="drawDot">画点</button>

    <button type='primary' bindtap="drawCircle">画圆</button>

  </view>

  <view class='btnLayout'>

    <button type='primary' bindtap="drawDash">画虚线</button>

    <button type='primary' bindtap="capAndJoin">端点交点</button>

    <button type='primary' bindtap="drawText">画字</button>

  </view>

  <view class='btnLayout'>

    <button type='primary' bindtap="circularGrad">圆形渐变</button>

    <button type='primary' bindtap="shadowRect">阴影矩形</button>

    <button type='primary' bindtap="translucent">半透明</button>

  </view>

</view>

/* pages/API/Drawing/index.wxss */

canvas {

  width: 100%;

  height: 340px;

  background-color: cornflowerblue;

}

button {

  width: 100px;

}

.btnLayout {

  display: flex;

  flex-direction: row;

  margin: 10px;

  justify-content: space-around; /* 弹性项目沿主轴方向平均分布，两边留有一半的间隔空间。 */

}